Untitled

import React from 'react';
import { useNavigate } from 'react-router-dom';
import './PaymentPage.css';
import upiImage from './upi.png';
import cardImage from './card.png';
import netbankingImage from './netbanking.png';
import cashOnDeliveryImage from './cash-on-delivery.png';

const PaymentPage = () => {
  const navigate = useNavigate();
  const [selectedOption, setSelectedOption] = React.useState(null);
  const [paymentDone, setPaymentDone] = React.useState(false);

  const handleOptionSelect = (option) => {
    setSelectedOption(option);
  };

  const handlePayment = () => {
    if (selectedOption) {
      setPaymentDone(true);
    } else {
      alert('Please select a payment option');
    }
  };

  return (
    <div className="payment-container">
      <h1>Choose Payment Method</h1>
      <div className="payment-option" onClick={() => handleOptionSelect('UPI')}>
        <img src={upiImage} alt="UPI" />
        <span>UPI</span>
      </div>
      <div className="payment-option" onClick={() => handleOptionSelect('Card')}>
        <img src={cardImage} alt="Card" />
        <span>Card</span>
      </div>
      <div className="payment-option" onClick={() => handleOptionSelect('Netbanking')}>
        <img src={netbankingImage} alt="Netbanking" />
        <span>Netbanking</span>
      </div>
      <div className="payment-option" onClick={() => handleOptionSelect('Cash on Delivery')}>
        <img src={cashOnDeliveryImage} alt="Cash on Delivery" />
        <span>Cash on Delivery</span>
      </div>
      {!paymentDone && (
        <button onClick={handlePayment}>Pay</button>
      )}
      {paymentDone && (
        <div className="payment-status">Payment Done</div>
      )}
    </div>
  );
};

export default PaymentPage;