import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectSeparator,
  SelectTrigger,
  SelectValue,
} from '@wandercom/design-system-web/ui/select';

export function Example() {
  return (
    <Select>
      <SelectTrigger>
        <SelectValue placeholder="Select an option" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="option-1">Option 1</SelectItem>
        <SelectItem value="option-2">Option 2</SelectItem>
        <SelectItem value="option-3">Option 3</SelectItem>
      </SelectContent>
    </Select>
  );
}

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Choose an option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
    <SelectItem value="3">Option 3</SelectItem>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger size="sm" className="w-[200px]">
    <SelectValue placeholder="Small select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
    <SelectItem value="3">Option 3</SelectItem>
  </SelectContent>
</Select>

<Select disabled>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Disabled select" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
    <SelectItem value="3">Option 3</SelectItem>
  </SelectContent>
</Select>

<Select defaultValue="invalid">
  <SelectTrigger aria-invalid="true" className="w-[200px]">
    <SelectValue />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="invalid">Invalid selection</SelectItem>
    <SelectItem value="1">Option 1</SelectItem>
    <SelectItem value="2">Option 2</SelectItem>
    <SelectItem value="3">Option 3</SelectItem>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-[200px]">
    <SelectValue placeholder="Choose a city" />
  </SelectTrigger>
  <SelectContent>
    <SelectGroup>
      <SelectLabel>East Coast</SelectLabel>
      <SelectItem value="nyc">New York</SelectItem>
      <SelectItem value="bos">Boston</SelectItem>
      <SelectItem value="dc">Washington DC</SelectItem>
    </SelectGroup>
    <SelectSeparator />
    <SelectGroup>
      <SelectLabel>West Coast</SelectLabel>
      <SelectItem value="sf">San Francisco</SelectItem>
      <SelectItem value="la">Los Angeles</SelectItem>
      <SelectItem value="sea">Seattle</SelectItem>
    </SelectGroup>
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-[280px]">
    <SelectValue placeholder="Choose a timezone" />
  </SelectTrigger>
  <SelectContent>
    {timezones.map(({ value, label }) => (
      <SelectItem key={value} value={value}>
        {label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-[280px]">
    <SelectValue placeholder="Choose a timezone" />
  </SelectTrigger>
  <SelectContent scrollable={false}>
    {timezones.map(({ value, label }) => (
      <SelectItem key={value} value={value}>
        {label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-[280px]">
    <SelectValue placeholder="Choose a timezone" />
  </SelectTrigger>
  <SelectContent>
    {timezones.map(({ value, label }) => (
      <SelectItem key={value} value={value}>
        {label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>

<Select>
  <SelectTrigger className="w-[280px]">
    <SelectValue placeholder="Choose a timezone" />
  </SelectTrigger>
  <SelectContent>
    {timezones.map(({ value, label }) => (
      <SelectItem key={value} truncate value={value}>
        {label}
      </SelectItem>
    ))}
  </SelectContent>
</Select>