"use client";

import React from 'react';

interface PaymentMethodSelectorProps {
  selectedMethod: 'card' | 'paypal' | 'vivapay';
  onMethodChange: (method: 'card' | 'paypal' | 'vivapay') => void;
}

export default function PaymentMethodSelector({
  selectedMethod,
  onMethodChange,
}: PaymentMethodSelectorProps) {
  const methods = [
    {
      id: 'card',
      name: 'Credit Card',
      icon: '💳',
      description: 'Visa, Mastercard, American Express',
    },
    {
      id: 'paypal',
      name: 'PayPal',
      icon: '₽',
      description: 'Fast and secure',
    },
    {
      id: 'vivapay',
      name: 'Viva Pay',
      icon: '🏦',
      description: 'Local payment method',
    },
  ];

  return (
    <div className="mb-8">
      <h2 className="text-sm font-semibold text-gray-700 mb-4 font-[Signika]">
        Select Payment Method
      </h2>
      <div className="grid grid-cols-3 gap-3">
        {methods.map((method) => (
          <button
            key={method.id}
            onClick={() => onMethodChange(method.id as 'card' | 'paypal' | 'vivapay')}
            className={`p-4 rounded-lg border-2 transition-all duration-200 text-center ${
              selectedMethod === method.id
                ? 'border-[#0097DC] bg-blue-50 shadow-md'
                : 'border-gray-200 bg-white hover:border-gray-300'
            }`}
          >
            <div className="text-3xl mb-2">{method.icon}</div>
            <h3 className="text-sm font-bold text-gray-800 font-[Signika]">
              {method.name}
            </h3>
            <p className="text-xs text-gray-500 mt-1 font-[Signika] line-clamp-1">
              {method.description}
            </p>
          </button>
        ))}
      </div>
    </div>
  );
}