vitrify-me/apps/web/components/CustomerDetails.tsx

import React from 'react';
import { User, Users } from 'lucide-react';
import { UseFormRegister, FieldErrors } from 'react-hook-form';
import { useTranslations } from 'next-intl';
import { BookingType } from '@/types/bookings';

interface FormData {
  customerName: string;
  customerEmail: string;
  participantsCount: number;
}

interface CustomerDetailsProps {
  register: UseFormRegister<FormData>;
  errors: FieldErrors<FormData>;
  participantsCount: number;
  onParticipantsCountChange: (count: number) => void;
  bookingType: BookingType;
}

const CustomerDetails: React.FC<CustomerDetailsProps> = ({
  register,
  errors,
  participantsCount,
  onParticipantsCountChange,
  bookingType,
}) => {
  const t = useTranslations('bookingForm');

  // Calculate min and max based on booking type
  const minParticipants = bookingType.min_participants_capacity;
  const maxParticipants = bookingType.max_participants_capacity;
  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">
        <User className="w-5 h-5" />
        Your Details
      </h2>
      
      <div className="space-y-4">
        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Full Name *
          </label>
          <input
            type="text"
            {...register('customerName', { 
              required: 'Full name is required',
              minLength: { value: 2, message: 'Name must be at least 2 characters' }
            })}
            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
              errors.customerName ? 'border-red-300' : 'border-gray-300'
            }`}
            placeholder="Enter your full name"
          />
          {errors.customerName && (
            <p className="text-red-500 text-sm mt-1">{errors.customerName.message}</p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2">
            Email Address *
          </label>
          <input
            type="email"
            {...register('customerEmail', { 
              required: 'Email address is required',
              pattern: {
                value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                message: 'Please enter a valid email address'
              }
            })}
            className={`w-full p-3 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent ${
              errors.customerEmail ? 'border-red-300' : 'border-gray-300'
            }`}
            placeholder="Enter your email"
          />
          {errors.customerEmail && (
            <p className="text-red-500 text-sm mt-1">{errors.customerEmail.message}</p>
          )}
        </div>

        <div>
          <label className="block text-sm font-medium text-gray-700 mb-2 flex items-center gap-2">
            <Users className="w-4 h-4" />
            Number of Participants
          </label>
          <div className="flex items-center justify-center bg-gray-100 rounded-lg p-1 max-w-xs">
            <button
              type="button"
              onClick={() => onParticipantsCountChange(Math.max(minParticipants, participantsCount - 1))}
              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              disabled={participantsCount <= minParticipants}
            >
              <span className="text-xl font-medium">−</span>
            </button>
            <div className="flex-1 text-center px-4">
              <span className="text-xl font-semibold text-gray-900">{participantsCount}</span>
              <div className="text-xs text-gray-500">participant{participantsCount > 1 ? 's' : ''}</div>
            </div>
            <button
              type="button"
              onClick={() => onParticipantsCountChange(Math.min(maxParticipants, participantsCount + 1))}
              className="w-12 h-12 flex items-center justify-center rounded-lg bg-white text-gray-600 hover:bg-gray-50 hover:text-gray-800 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
              disabled={participantsCount >= maxParticipants}
            >
              <span className="text-xl font-medium">+</span>
            </button>
          </div>
          
          <div className="text-xs text-gray-500 mt-2 text-center">
            Min: {minParticipants} • Max: {maxParticipants}
          </div>
          
          <input
            type="hidden"
            {...register('participantsCount', { 
              min: { value: minParticipants, message: `At least ${minParticipants} participants required` },
              max: { value: maxParticipants, message: `Maximum ${maxParticipants} participants allowed` }
            })}
            value={participantsCount}
          />
        </div>
      </div>
    </div>
  );
};

export default CustomerDetails;