/** HSR 專用時間選擇器組件

使用 time_id map 中的時間選項，而不是所有半小時選項。
*/

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

    // HSR time_id map 中的時間選項
    // 對應 thsr/time_converter.py 中的 TIME_ID_MAP
    const HSR_TIME_OPTIONS = [
        "00:01", "00:30",
        "06:00", "06:30", "07:00", "07:30", "08:00", "08:30",
        "09:00", "09:30", "10:00", "10:30", "11:00", "11:30",
        "12:00", "12:30", "13:00", "13:30", "14:00", "14:30",
        "15:00", "15:30", "16:00", "16:30", "17:00", "17:30",
        "18:00", "18:30", "19:00", "19:30", "20:00", "20:30",
        "21:00", "21:30", "22:00", "22:30", "23:00", "23:30"
    ];

    return (
        <div className="mb-4">
            <label className="block text-sm font-medium text-gray-700 mb-2">
                {label}
            </label>
            <select
                value={value || ""}
                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"
            >
                <option value="">請選擇時間（選填）</option>
                {HSR_TIME_OPTIONS.map((time) => (
                    <option key={time} value={time}>
                        {time}
                    </option>
                ))}
            </select>
        </div>
    );
};