"use client";
import React from 'react';
import { CheckCircle } from 'lucide-react';

interface PaymentOptionProps {
  label: string;
  amount: number;
  isSelected: boolean;
  onClick: () => void;
}

const PaymentOption: React.FC<PaymentOptionProps> = ({ label, amount, isSelected, onClick }) => {
  return (
    <button
      onClick={onClick}
      className={`w-full flex items-center justify-between px-6 py-4 rounded-xl font-medium transition ${
        isSelected
          ? 'bg-[#541592] text-white'
          : 'bg-gray-100 text-gray-700 hover:bg-gray-200'
      }`}
    >
      <span>{label}</span>
      <div className="flex items-center gap-2">
        <span>{amount.toLocaleString()}</span>
        {isSelected && <CheckCircle size={20} />}
      </div>
    </button>
  );
};

export default PaymentOption;