import React from 'react';
import { Calendar } from 'lucide-react';
import { useTranslations } from 'next-intl';

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

interface DateSelectorProps {
  selectedDate: string;
  availableDates: string[];
  onDateChange: (date: string) => void;
  loading?: boolean;
}

const DateSelector: React.FC<DateSelectorProps> = ({
  selectedDate,
  availableDates,
  onDateChange,
  loading = false,
}) => {
  const t = useTranslations('bookingForm');

  const generateCalendarDays = (): CalendarDay[] => {
    const today = new Date();
    const days: CalendarDay[] = [];
    
    // Show 30 days instead of 14 for better selection
    for (let i = 0; i < 30; i++) {
      const date = new Date(today);
      date.setDate(today.getDate() + i);
      const dateString = date.toISOString().split('T')[0] || '';
      
      days.push({
        date: dateString,
        day: date.getDate(),
        month: date.toLocaleDateString('en', { month: 'short' }),
        dayName: date.toLocaleDateString('en', { weekday: 'short' }),
        available: availableDates.includes(dateString)
      });
    }
    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" />
        {t('chooseDate')}
      </h2>
      
      {loading ? (
        <div className="flex justify-center items-center py-8">
          <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
          <span className="ml-2 text-gray-600">Loading available dates...</span>
        </div>
      ) : (
        <div className="grid grid-cols-7 gap-2 md:gap-3">
          {calendarDays.map((day) => (
            <button
              key={day.date}
              type="button"
              onClick={() => day.available && onDateChange(day.date)}
              disabled={!day.available}
              className={`p-3 rounded-lg text-center transition-all ${
                !day.available
                  ? 'bg-gray-50 text-gray-300 cursor-not-allowed'
                  : 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;