import { PlusIcon } from "lucide-react"

import { Tag } from "@/components/ui/tag"

export function TagDemo() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Tag>Label</Tag>
      <Tag state="active">Active</Tag>
      <Tag state="disabled">Disabled</Tag>
      <Tag closeLabel="Remove tag" showCloseButton>Label</Tag>
      <Tag closeLabel="Remove tag" type="dot" showCloseButton>
        Live
      </Tag>
      <Tag closeLabel="Remove tag" type="flag" showCloseButton>
        Egypt
      </Tag>
      <Tag closeLabel="Remove tag" type="avatar" avatar="AG" showCloseButton>
        Ahmed
      </Tag>
      <Tag closeLabel="Remove tag" type="icon" icon={<PlusIcon aria-hidden="true" />} showCloseButton>
        Add
      </Tag>
      <Tag closeLabel="\u0625\u0632\u0627\u0644\u0629 \u0648\u0633\u0645" dir="rtl" showCloseButton>
        ملصق
      </Tag>
    </div>
  )
}
