/** 車站選擇器組件 */

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

    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>
                {stations.map((station) => (
                    <option key={station.code} value={station.value}>
                        {station.label}
                    </option>
                ))}
            </select>
        </div>
    );
};