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

interface CalendarDay {
  date: string;
  day: number;
  month: string;
  dayName: string;
}

interface DateSelectorProps {
  selectedDate: string;
  onDateChange: (date: string) => void;
}

const DateSelector: React.FC<DateSelectorProps> = ({
  selectedDate,
  onDateChange,
}) => {
  const generateCalendarDays = (): CalendarDay[] => {
    const today = new Date();
    const days = [];
    
    for (let i = 0; i < 14; i++) {
      const date = new Date(today);
      date.setDate(today.getDate() + i);
      days.push({
        date: date.toISOString().split('T')[0],
        day: date.getDate(),
        month: date.toLocaleDateString('en', { month: 'short' }),
        dayName: date.toLocaleDateString('en', { weekday: 'short' })
      });
    }
    return days;
  };

  const calendarDays = generateCalendarDays();

  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">
        <Calendar className="w-5 h-5" />
        Choose Date
      </h2>
      <div className="grid grid-cols-7 gap-2 md:gap-3">
        {calendarDays.map((day) => (
          <button
            key={day.date}
            type="button"
            onClick={() => onDateChange(day.date)}
            className={`p-3 rounded-lg text-center transition-all ${
              selectedDate === day.date
                ? 'bg-blue-500 text-white'
                : 'bg-gray-100 hover:bg-gray-200 text-gray-700'
            }`}
          >
            <div className="text-xs font-medium">{day.dayName}</div>
            <div className="text-sm font-semibold">{day.day}</div>
            <div className="text-xs">{day.month}</div>
          </button>
        ))}
      </div>
    </div>
  );
};

export default DateSelector;