import React from 'react'
import { cn } from '../lib/utils'
import { ChevronDown } from 'lucide-react'

export interface DropdownOption {
  label: string
  value: string | number
}

interface DropdownProps {
  label: string
  value: string | number
  options: DropdownOption[]
  onValueChange: (value: string | number) => void
  className?: string
}

export function Dropdown({
  label,
  value,
  options,
  onValueChange,
  className,
}: DropdownProps) {
  const selectedLabel = options.find((o) => o.value === value)?.label || label

  return (
    <div className={cn('relative', className)}>
      <select
        value={value}
        onChange={(e) => onValueChange(e.target.value)}
        className="w-full appearance-none rounded-lg border border-gray-200 bg-white px-4 py-2.5 pr-10 text-sm focus:border-brand-500 focus:outline-none focus:ring-1 focus:ring-brand-500"
      >
        <option value="" disabled>
          {label}
        </option>
        {options.map((option) => (
          <option key={option.value} value={option.value}>
            {option.label}
          </option>
        ))}
      </select>
      <ChevronDown className="pointer-events-none absolute right-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
    </div>
  )
}
