Pill Select

import PillSelect from '@/components/ui/pill-select.tsx'

export default function Example() {
  return (
    <div className="p-6">
      <PillSelect />
    </div>
  )
}

import { ComponentType } from 'react'
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select'

interface PillSelectOption {
  value: string
  label: string
}

interface PillSelectProps {
  icon: ComponentType<{ className?: string }>
  value?: string
  defaultValue?: string
  onValueChange?: (value: string) => void
  options: PillSelectOption[]
  ariaLabel: string
  className?: string
}

export function PillSelect({
  icon: Icon,
  value,
  defaultValue,
  onValueChange,
  options,
  ariaLabel,
  className,
}: PillSelectProps) {
  return (
    <Select value={value} defaultValue={defaultValue} onValueChange={onValueChange}>
      <SelectTrigger
        aria-label={ariaLabel}
        className={`h-12 min-w-[150px] rounded-full border-input bg-card px-4 text-base text-foreground shadow-none ${className ?? ''}`}
      >
        <div className="flex items-center gap-2">
          <Icon className="h-4 w-4 text-muted-foreground" />
          <SelectValue />
        </div>
      </SelectTrigger>
      <SelectContent>
        {options.map((option) => (
          <SelectItem key={option.value} value={option.value}>
            {option.label}
          </SelectItem>
        ))}
      </SelectContent>
    </Select>
  )
}