import {
    formErrorClassName,
    formFieldClassName,
    formLabelClassName,
    radioInFormGridClassName,
    radioInFormOptionClassName,
    radioInFormOptionTextClassName,
} from '@admin/components/ui/field-styles';
import { cn } from '@admin/lib/utils';

export type FormRadioInInputOption<T extends string = string> = {
    value: T;
    label: string;
};

type FormRadioInInputProps<T extends string = string> = {
    name: string;
    label: string;
    value: T;
    options: FormRadioInInputOption<T>[];
    error?: string;
    onChange: (value: T) => void;
    className?: string;
};

export function FormRadioInInput<T extends string = string>({
    name,
    label,
    value,
    options,
    error,
    onChange,
    className,
}: FormRadioInInputProps<T>) {
    return (
        <div className={cn(formFieldClassName, 'mb-4', className)}>
            <span className={formLabelClassName}>{label}</span>
            <div className={radioInFormGridClassName}>
                {options.map((option) => {
                    const inputId = `${name}-${option.value}`;

                    return (
                        <label key={option.value} htmlFor={inputId} className={radioInFormOptionClassName}>
                            <input
                                type="radio"
                                id={inputId}
                                name={name}
                                className="ti-form-radio shrink-0"
                                checked={value === option.value}
                                onChange={() => onChange(option.value)}
                            />
                            <span className={radioInFormOptionTextClassName}>{option.label}</span>
                        </label>
                    );
                })}
            </div>
            {error && <span className={formErrorClassName}>{error}</span>}
        </div>
    );
}