"use client"; import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Input } from "@/components/ui/input"; import { Label } from "@/components/ui/label"; import { Button } from "@/components/ui/button"; import { Checkbox } from "@/components/ui/checkbox"; import { Badge } from "@/components/ui/badge"; import { Separator } from "@/components/ui/separator"; import { Check, Gift, ExternalLink } from "lucide-react"; const CheckoutPage = () => { const [selectedPayment, setSelectedPayment] = useState("card"); const [formData, setFormData] = useState({ cardName: "John Cena", cardNumber: "1234 5678 9012 3456", expiryDate: "09/27", cvc: "123", agreeTerms: true }); const paymentMethods = [ { id: "card", name: "Credit/Debit Card", logos: ["Visa", "Mastercard"], component: "card" }, { id: "paypal", name: "Paypal", logos: ["PayPal"], component: "external" }, { id: "ovo", name: "OVO", logos: ["OVO"], component: "external" }, { id: "mandiri", name: "Mandiri Virtual Account", logos: ["Mandiri"], component: "external" }, { id: "gopay", name: "GoPay", logos: ["GoPay"], component: "external" } ]; const handleInputChange = (field: string, value: string) => { setFormData((prev) => ({ ...prev, [field]: value })); }; return (

{/* Payment Method Section */}

Payment Method

{paymentMethods.map((method) => ( setSelectedPayment(method.id)}>

{selectedPayment === method.id && (

)}

{method.name}

{method.logos.map((logo) => (

{logo}

))}

{/* Card Form */} {selectedPayment === "card" && method.id === "card" && (

Name on Card *Required handleInputChange("cardName", e.target.value)} className="mt-1" placeholder="John Cena" />

Card Number *Required handleInputChange("cardNumber", e.target.value)} className="mt-1" placeholder="1234 5678 9012 3456" />

Expiry Date *Required handleInputChange("expiryDate", e.target.value)} className="mt-1" placeholder="09/27" />

CVC/CVV *Required handleInputChange("cvc", e.target.value)} className="ring-primary/20 border-primary/30 mt-1 ring-2" placeholder="123" />

)} ))}

{/* Order Details Section */}

Order Details

{/* Course Card */}

DESIGN

Mastering Illustration

25 Lessons • 72 Hours

$300

{/* Discount Section */}

GWENCHANA

Yeay, you got $10 discount!

{/* Price Breakdown */}

Price $300

Discount -$10

Tax +$1

Total $289

{/* Terms and Checkout */}

setFormData((prev) => ({ ...prev, agreeTerms: checked === true })) } className="mt-1" /> By clicking this you are agree to our{" "} Terms of Services {" "} and{" "} Privacy Policy .

); }; export default CheckoutPage;