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

interface PaymentMethodSelectorProps {
  value: 'cash' | 'stripe';
  onChange: (value: 'cash' | 'stripe') => void;
  error?: string;
  disabled?: boolean;
}

const PaymentMethodSelector: React.FC<
  PaymentMethodSelectorProps
> = ({ value, onChange, error, disabled = false }) => {
  return (
    <div>
      <h3 className="text-lg font-semibold text-gray-900 mb-3">
        Payment Method
        <span className="text-red-500 ml-1">*</span>
      </h3>

      <div className="space-y-3">
        {}
        <label
          className={`flex items-start p-4 border-2 
            rounded-lg cursor-pointer transition-all
            ${
              value === 'cash'
                ? 'border-indigo-500 bg-indigo-50'
                : 'border-gray-200 hover:border-indigo-300'
            }
            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
        >
          <input
            type="radio"
            name="payment_method"
            value="cash"
            checked={value === 'cash'}
            onChange={(e) => 
              onChange(e.target.value as 'cash')
            }
            disabled={disabled}
            className="mt-1 mr-3"
          />
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <CreditCard 
                className="w-5 h-5 text-gray-600" 
              />
              <span className="font-medium text-gray-900">
                Pay at Hotel
              </span>
            </div>
            <p className="text-sm text-gray-600">
              Pay directly at the hotel when checking in. 
              Cash and card accepted.
            </p>
            <div className="mt-2 text-xs text-gray-500 
              bg-white rounded px-2 py-1 inline-block"
            >
              ⏱️ Payment at check-in
            </div>
          </div>
        </label>

        {}
        <label
          className={`flex items-start p-4 border-2 
            rounded-lg cursor-pointer transition-all
            ${
              value === 'stripe'
                ? 'border-indigo-500 bg-indigo-50'
                : 'border-gray-200 hover:border-indigo-300'
            }
            ${disabled ? 'opacity-50 cursor-not-allowed' : ''}`}
        >
          <input
            type="radio"
            name="payment_method"
            value="stripe"
            checked={value === 'stripe'}
            onChange={(e) =>
              onChange(e.target.value as 'stripe')
            }
            disabled={disabled}
            className="mt-1 mr-3"
          />
          <div className="flex-1">
            <div className="flex items-center gap-2 mb-1">
              <CreditCard 
                className="w-5 h-5 text-indigo-600" 
              />
              <span className="font-medium text-gray-900">
                Pay with Card (Stripe)
              </span>
              <span className="text-xs bg-indigo-100 
                text-indigo-700 px-2 py-0.5 rounded-full 
                font-medium"
              >
                Instant
              </span>
            </div>
            <p className="text-sm text-gray-600">
              Secure payment with credit or debit card. 
              Instant confirmation.
            </p>
            <div className="mt-2 text-xs text-gray-500 
              bg-white rounded px-2 py-1 inline-block"
            >
              💳 Secure card payment
            </div>
          </div>
        </label>
      </div>

      {error && (
        <p className="text-sm text-red-600 mt-2">
          {error}
        </p>
      )}

      {}
      <div className="mt-4 p-3 bg-blue-50 border 
        border-blue-200 rounded-lg"
      >
        <p className="text-xs text-blue-800">
          💡 <strong>Note:</strong> {' '}
          {value === 'cash'
            ? 'You will pay when checking in. Cash and card accepted at the hotel.'
            : 'Your payment will be processed securely through Stripe.'}
        </p>
      </div>
    </div>
  );
};

export default PaymentMethodSelector;