import { ChevronDown } from 'lucide-react'
import * as SelectPrimitive from './index'

export default () => (
  <SelectPrimitive.Root>
    <SelectPrimitive.Trigger tw="w-[180px]">
      <SelectPrimitive.Value placeholder="Select a fruit" />
      <ChevronDown tw="h-4 w-4 opacity-50" />
    </SelectPrimitive.Trigger>
    <SelectPrimitive.Content>
      <SelectPrimitive.Group>
        <SelectPrimitive.Label>Fruits</SelectPrimitive.Label>
        <SelectPrimitive.Item value="apple">Apple</SelectPrimitive.Item>
        <SelectPrimitive.Item value="banana">Banana</SelectPrimitive.Item>
        <SelectPrimitive.Item value="blueberry">Blueberry</SelectPrimitive.Item>
        <SelectPrimitive.Item value="grapes">Grapes</SelectPrimitive.Item>
        <SelectPrimitive.Item value="pineapple">Pineapple</SelectPrimitive.Item>
      </SelectPrimitive.Group>
      <SelectPrimitive.Separator />
      <SelectPrimitive.Group>
        <SelectPrimitive.Label>Vegetables</SelectPrimitive.Label>
        <SelectPrimitive.Item value="aubergine">Aubergine</SelectPrimitive.Item>
        <SelectPrimitive.Item value="broccoli">Broccoli</SelectPrimitive.Item>
        <SelectPrimitive.Item value="carrot" disabled>
          Carrot
        </SelectPrimitive.Item>
        <SelectPrimitive.Item value="courgette">Courgette</SelectPrimitive.Item>
        <SelectPrimitive.Item value="leek">Leek</SelectPrimitive.Item>
      </SelectPrimitive.Group>
      <SelectPrimitive.Separator />
      <SelectPrimitive.Group>
        <SelectPrimitive.Label>Meat</SelectPrimitive.Label>
        <SelectPrimitive.Item value="beef">Beef</SelectPrimitive.Item>
        <SelectPrimitive.Item value="chicken">Chicken</SelectPrimitive.Item>
        <SelectPrimitive.Item value="lamb">Lamb</SelectPrimitive.Item>
        <SelectPrimitive.Item value="pork">Pork</SelectPrimitive.Item>
      </SelectPrimitive.Group>
    </SelectPrimitive.Content>
  </SelectPrimitive.Root>
)
