import { Select } from '@/Components/ui';

type SelectFieldProps<V extends string> = {
    id: string;
    label: string;
    value: V;
    onChange: (next: V) => void;
    options: ReadonlyArray<{ value: V; label: string }>;
    error?: string;
    hint?: string;
};

export function SelectField<V extends string>({
    id,
    label,
    value,
    onChange,
    options,
    error,
    hint,
}: SelectFieldProps<V>) {
    return (
        <div className="space-y-1.5">
            <label
                htmlFor={id}
                className="block text-[11px] font-medium text-foreground"
            >
                {label}
            </label>
            <Select
                id={id}
                value={value}
                onChange={(ev) => onChange(ev.target.value as V)}
                invalid={Boolean(error)}
            >
                {options.map((opt) => (
                    <option key={opt.value} value={opt.value}>
                        {opt.label}
                    </option>
                ))}
            </Select>
            {hint && !error && <p className="text-xs text-muted-foreground">{hint}</p>}
            {error && <p className="text-xs text-destructive">{error}</p>}
        </div>
    );
}

export const ALIGN_OPTIONS = [
    { value: 'left', label: 'Left' },
    { value: 'center', label: 'Center' },
] as const;

export function newBlockId(prefix = 'block'): string {
    if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
        return crypto.randomUUID();
    }
    return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 1e6)}`;
}
