// src/components/ui/Select.tsx
// Input: options array, value, onChange, placeholder
// Output: styled native select with chevron
// Rationale: filter dropdowns in project list and elsewhere

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

export interface SelectOption {
  value: string
  label: string
}

export interface SelectProps {
  options: SelectOption[]
  value: string
  onChange: (value: string) => void
  placeholder?: string
  className?: string
}

export function Select({ options, value, onChange, placeholder, className }: SelectProps) {
  return (
    <div className="relative">
      <select
        value={value}
        onChange={(e) => onChange(e.target.value)}
        className={cn(
          'w-full h-[34px] bg-bg-subtle border border-bg-border rounded-md appearance-none',
          'text-body text-text-primary',
          'pl-3 pr-8',
          'focus:border-accent focus:shadow-[0_0_0_2px_rgba(61,184,232,0.1)]',
          'transition-colors duration-fast cursor-pointer',
          !value && 'text-text-muted',
          className
        )}
      >
        {placeholder && (
          <option value="" disabled hidden>{placeholder}</option>
        )}
        {options.map((opt) => (
          <option key={opt.value} value={opt.value} className="bg-bg-overlay text-text-primary">
            {opt.label}
          </option>
        ))}
      </select>
      <ChevronDown
        size={14}
        strokeWidth={1.5}
        className="absolute right-2.5 top-1/2 -translate-y-1/2 text-text-muted pointer-events-none"
      />
    </div>
  )
}