paybill jsx

import React, { useState } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import 'bootstrap/dist/css/bootstrap.min.css';
import './Paybill.css';

const PayBill = () => {
const [phoneNumber, setPhoneNumber] = useState('');
const [billDetails, setBillDetails] = useState(null);
const [paymentMethod, setPaymentMethod] = useState('Credit Card');
const [paymentStatus, setPaymentStatus] = useState('');
const [focused, setFocused] = useState(false);

const fetchBill = () => {
const mockBill = {
customerName: "Rajesh Kumar",
amountDue: 689.50,
dueDate: "2025-04-30",
region: "Tamil Nadu",
};
setTimeout(() => setBillDetails(mockBill), 800);
setPaymentStatus('');
};

const handlePayment = () => {
setPaymentStatus(Payment of ₹${billDetails.amountDue} successful via ${paymentMethod});
};

return (
<div className="paybill-container vh-100 d-flex justify-content-center align-items-center">
<motion.div
className="paybill-card p-5"
initial={{ opacity: 0, y: -50 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8 }}
>
<motion.h2
className="text-center mb-4 fw-bold paybill-heading"
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
transition={{ duration: 0.5 }}
>
BSNL Bill Payment
</motion.h2>

    <div className="mb-4 position-relative">
      <label 
        htmlFor="phoneNumber" 
        className={`form-label text-primary position-absolute transition-label ${focused || phoneNumber ? 'label-up' : ''}`}
      >
        Enter Phone Number
      </label>
      <input
        type="text"
        className="form-control py-3 px-4 rounded-3 phone-input"
        id="phoneNumber"
        placeholder=""
        value={phoneNumber}
        onFocus={() => setFocused(true)}
        onBlur={() => setFocused(false)}
        onChange={(e) => setPhoneNumber(e.target.value)}
      />
    </div>

    <div className="text-center mb-4">
      <motion.button
        className="btn btn-primary rounded-pill paybill-button"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
        onClick={fetchBill}
        disabled={!phoneNumber}
      >
        Fetch Bill
      </motion.button>
    </div>

    <AnimatePresence>
      {billDetails && (
        <motion.div
          className="bill-details-container"
          initial={{ opacity: 0, y: 50 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 50 }}
          transition={{ duration: 0.6 }}
        >
          <div className="bill-header">Bill Details</div>
          <div className="bill-info">
            <p><strong>Name:</strong> {billDetails.customerName}</p>
            <p><strong>Region:</strong> {billDetails.region}</p>
            <p><strong>Due Date:</strong> {billDetails.dueDate}</p>
            <p><strong>Amount:</strong> ₹{billDetails.amountDue}</p>
          </div>

          <div className="mb-3">
            <label className="form-label">Payment Method</label>
            <select
              className="form-select"
              value={paymentMethod}
              onChange={(e) => setPaymentMethod(e.target.value)}
            >
              <option>Credit Card</option>
              <option>Debit Card</option>
              <option>Net Banking</option>
              <option>UPI</option>
            </select>
          </div>

          <motion.button
            className="btn btn-success rounded-pill paybill-button"
            whileHover={{ scale: 1.05 }}
            whileTap={{ scale: 0.95 }}
            onClick={handlePayment}
          >
            Pay Now
          </motion.button>
        </motion.div>
      )}
    </AnimatePresence>

    <AnimatePresence>

{paymentStatus && (
<motion.div
className="modal-overlay"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
>
<motion.div
className="modal-content"
initial={{ scale: 0.8 }}
animate={{ scale: 1 }}
exit={{ scale: 0.8 }}
transition={{ duration: 0.4 }}
>
<div className="checkmark-circle">
<div className="background"></div>
<div className="checkmark draw"></div>
</div>
<h4 className="mt-3 text-center">Payment Successful!</h4>
<p className="text-muted text-center">{paymentStatus}</p>
<div className="text-center mt-4">
<button className="btn btn-outline-primary" onClick={() => setPaymentStatus('')}>
Close
</button>
</div>
</motion.div>
</motion.div>
)}
</AnimatePresence>

  </motion.div>
</div>

);
};

export default PayBill;