import React from 'react';
import { PaymentStatus } from '../lib/types';
import { useTranslations } from 'next-intl';

// ─── Payme Logo SVG ────────────────────────────────────────────────────────────

const PaymeLogo: React.FC = () => (
  <svg
    width="72"
    height="18"
    viewBox="0 0 72 18"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    aria-label="Payme"
  >
    <text
      x="0"
      y="14"
      fontFamily="'Arial Black', sans-serif"
      fontWeight="900"
      fontSize="16"
      fill="white"
      letterSpacing="-0.5"
    >
      Payme
    </text>
  </svg>
);

// ─── Spinner ───────────────────────────────────────────────────────────────────

const Spinner: React.FC = () => (
  <svg
    className="animate-spin h-5 w-5 text-white"
    xmlns="http://www.w3.org/2000/svg"
    fill="none"
    viewBox="0 0 24 24"
    aria-hidden="true"
  >
    <circle
      className="opacity-25"
      cx="12"
      cy="12"
      r="10"
      stroke="currentColor"
      strokeWidth="4"
    />
    <path
      className="opacity-75"
      fill="currentColor"
      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
    />
  </svg>
);

// ─── PaymeButton ───────────────────────────────────────────────────────────────

interface PaymeButtonProps {
  onClick: () => void;
  status: PaymentStatus;
}

export const PaymeButton: React.FC<PaymeButtonProps> = ({
  onClick,
  status,
}) => {
  const isLoading = status === 'loading';
  const t = useTranslations('Payment');

  return (
    <button
      onClick={onClick}
      disabled={isLoading}
      aria-busy={isLoading}
      aria-label={t('payButton')}
      className={`
        w-full flex items-center justify-center gap-3
        rounded-xl px-6 py-4
        font-semibold text-white text-sm tracking-wide
        transition-all duration-200 ease-out
        focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-blue-500
        ${
          isLoading
            ? 'bg-blue-400 cursor-not-allowed opacity-80'
            : 'bg-[#00AAFF] hover:bg-[#009AEE] active:scale-[0.98] shadow-md hover:shadow-lg'
        }
      `}
    >
      {isLoading ? (
        <>
          <Spinner />
          <span>{t('connecting')}</span>
        </>
      ) : (
        <>
          <PaymeLogo />
        </>
      )}
    </button>
  );
};
