import React from 'react';
import { Calendar } from 'lucide-react';
import { useTranslations } from 'next-intl';
import { BookingType } from '@/types/bookings';

interface BookingTypeSelectorProps {
  bookingTypes: BookingType[];
  selectedBookingType: string;
  onBookingTypeChange: (typeId: string) => void;
}

const BookingTypeSelector: React.FC<BookingTypeSelectorProps> = ({
  bookingTypes,
  selectedBookingType,
  onBookingTypeChange,
}) => {
  const t = useTranslations('bookingForm');

  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('selectExperience')}
      </h2>
      <div className="grid gap-3">
        {bookingTypes.map((type) => (
          <label key={type.id} className="cursor-pointer">
            <input
              type="radio"
              name="bookingType"
              value={type.id}
              checked={selectedBookingType === type.id}
              onChange={(e) => onBookingTypeChange(e.target.value)}
              className="sr-only"
            />
            <div className={`p-4 rounded-lg border-2 transition-all ${
              selectedBookingType === type.id 
                ? 'border-blue-500 bg-blue-50' 
                : 'border-gray-200 hover:border-gray-300'
            }`}>
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-medium text-gray-900">{type.display_name}</h3>
                  {type.requires_payment && (
                    <p className="text-sm text-gray-600 mt-1">
                      ₾{type.price_per_person} {t('perPerson')}
                    </p>
                  )}
                </div>
                {type.requires_payment && (
                  <span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">
                    {t('paymentRequired')}
                  </span>
                )}
              </div>
            </div>
          </label>
        ))}
      </div>
    </div>
  );
};

export default BookingTypeSelector;