/** 日期選擇器組件 */

const DatePicker = ({ value, onChange }) => {
    const handleChange = (e) => {
        onChange(e.target.value);
    };

    // 生成未來60天的日期選項
    const getDateOptions = () => {
        const options = [];
        const today = new Date();
        for (let i = 0; i < 60; i++) {
            const date = new Date(today);
            date.setDate(today.getDate() + i);
            const dateStr = date.toISOString().split('T')[0];
            const formattedDate = `${date.getFullYear()}/${String(date.getMonth() + 1).padStart(2, '0')}/${String(date.getDate()).padStart(2, '0')}`;
            options.push({ value: formattedDate, label: formattedDate, dateStr });
        }
        return options;
    };

    const dateOptions = getDateOptions();
    const defaultDate = dateOptions[0]?.value || '';

    return (
        <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 mb-2">
                訂票日期
            </label>
            <select
                value={value || defaultDate}
                onChange={handleChange}
                className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-base"
            >
                {dateOptions.map((option) => (
                    <option key={option.dateStr} value={option.value}>
                        {option.label}
                    </option>
                ))}
            </select>
        </div>
    );
};