import React from 'react';
import { Icon } from '@akinon/next/components';
import type { PaymentMethodSelectorProps } from '../types/custom-render.types';

const PaymentMethodSelector: React.FC<PaymentMethodSelectorProps> = ({
  cards,
  selectedMethod,
  onMethodChange,
  texts
}) => {
  const hasStoredCards = cards && cards.length > 0;

  return (
    <div className="bg-white border border-[#eeeeee] shadow-sm">
      <div className="border-b border-[#eeeeee] px-4 py-3 sm:px-6 sm:py-4">
        <h3 className="text-lg font-medium text-[#4a4f54]">
          {texts.paymentMethodTitle}
        </h3>
        <p className="text-sm text-[#c9c9c9] mt-1">
          {texts.paymentMethodDescription}
        </p>
      </div>

      <div className="p-4 sm:p-6">
        <div
          className={`grid gap-4 ${
            hasStoredCards
              ? 'grid-cols-1 md:grid-cols-2'
              : 'grid-cols-1 place-items-center'
          }`}
        >
          {hasStoredCards && (
            <div
              className="flex items-center p-4 border border-[#eeeeee] hover:border-[#000000] transition-colors cursor-pointer"
              onClick={() => onMethodChange('stored_card')}
            >
              <div
                className={`
                  w-4 h-4 border-2 rounded-full flex items-center justify-center mr-3
                  ${
                    selectedMethod === 'stored_card'
                      ? 'border-[#000000] bg-[#000000]'
                      : 'border-[#ebebeb]'
                  }
                `}
              >
                {selectedMethod === 'stored_card' && (
                  <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
                )}
              </div>
              <div className="flex items-center">
                <Icon
                  name="credit-card"
                  size={20}
                  className="text-[#9d9d9d] mr-3"
                />
                <div>
                  <div className="font-medium text-[#4a4f54]">
                    {texts.savedCardsText}
                  </div>
                  <div className="text-sm text-[#c9c9c9]">
                    {texts.savedCardsDescription.replace(
                      '{count}',
                      cards.length.toString()
                    )}
                  </div>
                </div>
              </div>
            </div>
          )}

          <div
            className="flex items-center p-4 border border-[#eeeeee] hover:border-[#000000] transition-colors cursor-pointer"
            onClick={() => onMethodChange('new_card')}
          >
            <div
              className={`
                w-4 h-4 border-2 rounded-full flex items-center justify-center mr-3
                ${
                  selectedMethod === 'new_card'
                    ? 'border-[#000000] bg-[#000000]'
                    : 'border-[#ebebeb]'
                }
              `}
            >
              {selectedMethod === 'new_card' && (
                <div className="w-2 h-2 bg-[#ffffff] rounded-full"></div>
              )}
            </div>
            <div className="flex items-center">
              <Icon name="plus" size={20} className="text-[#9d9d9d] mr-3" />
              <div>
                <div className="font-medium text-[#4a4f54]">
                  {texts.newCardText}
                </div>
                <div className="text-sm text-[#c9c9c9]">
                  {texts.newCardDescription}
                </div>
              </div>
            </div>
          </div>
        </div>

        {!hasStoredCards && (
          <div className="flex items-center justify-center p-8 text-[#c9c9c9]">
            <div className="text-center">
              <Icon
                name="credit-card"
                size={24}
                className="mx-auto mb-2 text-[#d7d7d7]"
              />
              <p className="text-sm">{texts.noPaymentMethodsText}</p>
            </div>
          </div>
        )}
      </div>
    </div>
  );
};

export default PaymentMethodSelector;