import {
  ArrowUpRightIcon,
  BadgeCheckIcon,
  BookmarkIcon,
} from "lucide-react"

import { Badge } from "@/components/ui/badge"
import { Spinner } from "@/components/ui/spinner"

export function BadgeDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Badge>Badge</Badge>
      <Badge badgeStyle="outline">Outline</Badge>
      <Badge badgeStyle="solid" color="blue">
        Blue
      </Badge>
      <Badge badgeStyle="solid" color="green">
        Approved
      </Badge>
      <Badge badgeStyle="solid" color="amber">
        Warning
      </Badge>
      <Badge badgeStyle="solid" color="danger">
        Danger
      </Badge>
      <Badge color="purple" type="dot">
        Live
      </Badge>
      <Badge color="rose" showNumber>
        2
      </Badge>
      <Badge color="green" type="leading-icon">
        <BadgeCheckIcon data-icon="inline-start" />
        Verified
      </Badge>
      <Badge badgeStyle="outline" color="neutral" type="trailing-icon">
        Bookmark
        <BookmarkIcon data-icon="inline-end" />
      </Badge>
      <Badge color="sky" type="leading-icon">
        <Spinner data-icon="inline-start" />
        Syncing
      </Badge>
      <Badge asChild badgeStyle="outline" color="blue" type="trailing-icon">
        <a href="#badge">
          Open
          <ArrowUpRightIcon data-icon="inline-end" data-rtl-flip="true" />
        </a>
      </Badge>
    </div>
  )
}
