import React, { useMemo } from 'react';

interface SelectInputProps {
    value: string;
    onChange: (value: string) => void;
    options: any[] | string | Record<string, any>;
}

export default function SelectInput({ value, onChange, options }: SelectInputProps) {
    const parsedOptions = useMemo(() => {
        if (Array.isArray(options)) return options;
        if (typeof options === 'string') {
            try {
                return JSON.parse(options);
            } catch {
                return [];
            }
        }
        return Object.values(options)
    }, [options]);

    const formatOption = (opt: any): string => {
        if (typeof opt === 'string') {
            return opt.charAt(0).toUpperCase() + opt.slice(1).replace(/_/g, ' ');
        }
        return String(opt);
    };

    return (
        <select
            className="w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 text-sm"
            value={value || ''}
            onChange={(e) => onChange(e.target.value)}
        >
            {parsedOptions.map((opt: any, index: number) => (
                <option key={index} value={opt}>
                    {formatOption(opt)}
                </option>
            ))}
        </select>
    );
}