"use client"

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"
import { SETTINGS_SELECT_TRIGGER_CLASS } from "@/components/settings/constants"
import type { SettingsSelectOption } from "@/components/settings/types"
import { cn } from "@/lib/utils"

type SettingsSelectProps = {
  value: string
  onValueChange: (value: string) => void
  options: SettingsSelectOption[]
  placeholder?: string
  disabled?: boolean
  className?: string
}

export function SettingsSelect({
  value,
  onValueChange,
  options,
  placeholder = "Select…",
  disabled,
  className,
}: SettingsSelectProps) {
  return (
    <Select value={value} onValueChange={onValueChange} disabled={disabled}>
      <SelectTrigger className={cn(SETTINGS_SELECT_TRIGGER_CLASS, className)}>
        <SelectValue placeholder={placeholder} />
      </SelectTrigger>
      <SelectContent>
        {options
          .filter((opt) => opt.value !== "")
          .map((opt) => (
            <SelectItem key={opt.value} value={opt.value}>
              {opt.label}
            </SelectItem>
          ))}
      </SelectContent>
    </Select>
  )
}