import { FormGroup } from '@admin/components/ui/forms/form-group';
import { FormSwitch } from '@admin/components/ui/forms/form-switch';

type TeamPositionFormFieldsProps = {
    data: {
        name: string;
        tag: string;
        status: boolean;
    };
    errors: Partial<Record<'name' | 'tag' | 'status', string>>;
    setData: (key: string, value: unknown) => void;
};

export function TeamPositionFormFields({ data, errors, setData }: TeamPositionFormFieldsProps) {
    return (
        <>
            <FormGroup
                label="Name"
                error={errors.name}
                inputProps={{
                    value: data.name,
                    onChange: (event) => setData('name', event.target.value),
                    required: true,
                }}
            />

            <FormGroup
                label="Tag"
                helpText="Optional short label shown on the public site."
                error={errors.tag}
                inputProps={{
                    value: data.tag,
                    onChange: (event) => setData('tag', event.target.value),
                }}
            />

            <FormSwitch
                id="team-position-status"
                label="Active"
                checked={data.status}
                onChange={(event) => setData('status', event.target.checked)}
            />
        </>
    );
}