import React from 'react';
import { Clock } from 'lucide-react';

interface TimeSlot {
  id: string;
  start_time: string;
  end_time: string;
  available: boolean;
}

interface TimeSlotSelectorProps {
  timeSlots: TimeSlot[];
  selectedTimeSlot: string;
  onTimeSlotChange: (slotId: string) => void;
}

const TimeSlotSelector: React.FC<TimeSlotSelectorProps> = ({
  timeSlots,
  selectedTimeSlot,
  onTimeSlotChange,
}) => {
  return (
    <div className="bg-white rounded-xl p-6 shadow-sm">
      <h2 className="text-xl font-semibold text-gray-900 mb-4 flex items-center gap-2">
        <Clock className="w-5 h-5" />
        Available Times
      </h2>
      <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
        {timeSlots.map((slot) => (
          <button
            key={slot.id}
            type="button"
            disabled={!slot.available}
            onClick={() => onTimeSlotChange(slot.id)}
            className={`p-3 rounded-lg text-center transition-all ${
              !slot.available
                ? 'bg-gray-100 text-gray-400 cursor-not-allowed'
                : selectedTimeSlot === slot.id
                ? 'bg-blue-500 text-white'
                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
            }`}
          >
            <div className="font-medium">
              {slot.start_time} - {slot.end_time}
            </div>
          </button>
        ))}
      </div>
    </div>
  );
};

export default TimeSlotSelector;