import { Input } from '@/components/ui/input';
import { useTranslation } from '@/hooks/use-translation';

type PreparationTimeFieldProps = {
    value: string | number;
    onChange: (v: string) => void;
};

export default function PreparationTimeField({ value, onChange }: PreparationTimeFieldProps) {
    const { t } = useTranslation();

    return (
        <div>
            <h2 className="mt-4 mb-3 text-lg font-bold">
                <span className="text-secondary mr-1">•</span>
                {t('properties.step4', 'preparation_time_title')}
            </h2>
            <div className="flex flex-wrap items-center gap-2">
                <p>{t('properties.step4', 'preparation_time_instruction')}</p>
                <span>{t('properties.step4', 'reservations_possible_until')} </span>
                <div>
                    <Input
                        type="number"
                        id="preparation_time_before_arrival"
                        placeholder={t('properties.step4', 'hours')}
                        value={value}
                        onChange={(e) => onChange(e.target.value)}
                        required
                    />
                </div>
                <span>{t('properties.step4', 'hours_before_arrival')}</span>
            </div>
        </div>
    );
}