// Sample payment plans data structure
const samplePaymentPlans = [
  {
    "resource": "plan",
    "planId": "pln_456",
    "mode": "live",
    "duration": "6",
    "frequency": "month",
    "installment": {
      "value": "100.00",
      "currency": "QAR"
    },
    "rate": "0",
    "processingFee": {
      "value": "10.00",
      "currency": "QAR"
    },
    "tnc": {
      "en": {
        "text": "From [Issuing Bank]: You are selecting a 6-month installment plan...",
        "url": "https://abcbank.com/en/installments/tnc"
      }
    }
  }
];

// Implementation with TnC checkbox
function InstallmentOptions({ paymentPlans }) {
  // State management for selection and terms acceptance
  const [selectedPlan, setSelectedPlan] = useState(null);
  const [acceptedTerms, setAcceptedTerms] = useState(false);
  
  return (
    <div>
      {/* Payment options */}
      <div>
        {paymentPlans.map((plan, i) => (
          <label key={i}>
            <input 
              type="radio" 
              name="paymentPlan" 
              onChange={() => {
                setSelectedPlan(plan);
                setAcceptedTerms(false); // Reset terms acceptance when plan changes
              }}
            />
            <div>
              {/* DATA MAPPING: plan.duration → "PAY IN X" */}
              <div>PAY IN {plan.duration}</div>
              {/* DATA MAPPING: plan.installment → "X QAR/month" */}
              <div>{plan.installment.value} {plan.installment.currency}/{plan.frequency}</div>
              <div>
                {/* DATA MAPPING: plan.rate → "Monthly rate: X%" */}
                Monthly rate: {plan.rate}% 
                {/* DATA MAPPING: plan.processingFee → "Processing Fee: X QAR" */}
                Processing Fee: {plan.processingFee.value} {plan.processingFee.currency}
              </div>
            </div>
          </label>
        ))}
      </div>
      
      {/* Terms and conditions with checkbox */}
      {selectedPlan?.tnc && (
        <div>
          <label>
            <input 
              type="checkbox" 
              checked={acceptedTerms}
              onChange={(e) => setAcceptedTerms(e.target.checked)}
            />
            {/* DATA MAPPING: plan.tnc.en.text → Terms text */}
            {selectedPlan.tnc.en.text} 
            {/* DATA MAPPING: plan.tnc.en.url → "Learn more" link */}
            <a href={selectedPlan.tnc.en.url}>Learn more</a>
          </label>
        </div>
      )}

      {/* Pay button - disabled until plan selected AND terms accepted */}
      <button disabled={!selectedPlan || !acceptedTerms}>
        Pay
      </button>
    </div>
  );
}