import {
  Select,
  SelectItemAvatar,
  SelectItemCompanyLogo,
  SelectItemFlag,
  SelectItemPaymentIcon,
  SelectItemStatusDot,
  SelectMenuItem,
} from "@/components/ui/select"

export function SelectDemo() {
  return (
    <div className="grid gap-8">
      <Select
        helperText="This is a hint text"
        label="Label"
        open
        placeholder="Select User"
        state="filled"
        value="Username"
      >
        <SelectMenuItem itemType="default" label="Text option" addonText="Meta" />
        <SelectMenuItem itemType="avatar" label="User" addonText="Active" />
        <SelectMenuItem itemType="flag" label="Egypt" addonText="+20" />
        <SelectMenuItem itemType="company" label="Company" addonText="Workspace" />
        <SelectMenuItem itemType="payment" label="Visa ending 2048" addonText="Default" />
        <SelectMenuItem itemType="dot" label="Active status" addonText="Online" selected />
      </Select>

      <Select label="Payment method" value="Mastercard" variant="soft">
        <SelectMenuItem
          label="Custom payment"
          addonText="Primary"
          media={<SelectItemPaymentIcon />}
        />
        <SelectMenuItem
          label="Custom company"
          addonText="Team"
          media={<SelectItemCompanyLogo />}
        />
      </Select>

      <Select dir="rtl" label="ملصق" helperText="هذه نص تلميح.">
        <SelectMenuItem
          dir="rtl"
          label="حدد"
          addonText="إضافة نص"
          selected
        />
        <SelectMenuItem
          dir="rtl"
          label="مستخدم"
          addonText="نشط"
          media={<SelectItemAvatar fallback="م" />}
          selectionType="checkbox"
          selected
        />
        <SelectMenuItem
          dir="rtl"
          label="الحالة"
          addonText="متصل"
          media={<SelectItemStatusDot />}
        />
        <SelectMenuItem
          dir="rtl"
          label="دولة"
          addonText="+20"
          media={<SelectItemFlag />}
        />
      </Select>
    </div>
  )
}
