import React from 'react';
import { User, Users } from 'lucide-react';
import { UseFormRegister, FieldErrors } from 'react-hook-form';

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

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

const CustomerDetails: React.FC<CustomerDetailsProps> = ({
  register,
  errors,
  participantsCount,
  onParticipantsCountChange,
}) => {
  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(1, 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={participantsCount <= 1}
            >
              <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(8, 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={participantsCount >= 8}
            >
              <span className="text-xl font-medium">+</span>
            </button>
          </div>
          <input
            type="hidden"
            {...register('participantsCount', { 
              min: { value: 1, message: 'At least 1 participant required' },
              max: { value: 8, message: 'Maximum 8 participants allowed' }
            })}
            value={participantsCount}
          />
        </div>
      </div>
    </div>
  );
};

export default CustomerDetails;