'use client';

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Label } from '@/components/ui/label';

export interface SelectOption {
  value: string | number;
  label: string;
}

export interface SelectInputProps {
  label: string;
  value?: string | number;
  defaultValue?: string | number;
  options: SelectOption[];
  onChange: (value: string | number) => void;
  className?: string;
  disabled?: boolean;
  placeholder?: string;
  helpText?: string;
}

export default function SelectInput({
  label,
  value,
  defaultValue,
  options,
  onChange,
  className = '',
  disabled = false,
  placeholder = 'Select an option',
  helpText,
}: SelectInputProps) {
  const currentValue = value ?? defaultValue;

  return (
    <div className={className}>
      <Label>
        {label}
      </Label>
      <Select 
        value={currentValue?.toString()}
        onValueChange={(val) => {
          const selectedOption = options.find(opt => opt.value.toString() === val);
          if (selectedOption) {
            onChange(selectedOption.value);
          }
        }}
        disabled={disabled}
      >
        <SelectTrigger className="mt-2">
          <SelectValue placeholder={placeholder} />
        </SelectTrigger>
        <SelectContent>
          {options.map((option) => (
            <SelectItem key={option.value.toString()} value={option.value.toString()}>
              {option.label}
            </SelectItem>
          ))}
        </SelectContent>
      </Select>
      {helpText && (
        <p className="text-xs text-muted-foreground mt-1">
          {helpText}
        </p>
      )}
    </div>
  );
}