import React from "react";
import Drawer from "../../components/Fragments/Drawer";
import Footer from "../../components/Elements/Footer";

const DetailPrice = () => {
    return (
        <>
            <Drawer>
                <div className="p-4 sm:p-6 bg-white rounded-xl shadow-2xl">
                    {/* Container for Return to Payment Method */}
                    <div className="p-4 sm:p-6 bg-white rounded-lg shadow-xl mb-6">
                        {/* Top Bar */}
                        <div className="flex flex-col sm:flex-row justify-between items-center mb-6">
                            <button className="text-gray-600 text-lg">Return</button>
                            <span className="text-gray-400 text-sm mt-2 sm:mt-0">ORDER NO. 250722AD4DCUSP</span>
                            <span className="text-purple-500 text-lg mt-2 sm:mt-0">Finished</span>
                        </div>

                        <div className="pb-3">
                            <hr />
                        </div>

                        {/* Product Info */}
                        <div className="flex flex-col sm:flex-row justify-between items-center">
                            <div className="flex items-center">
                                <img src="/image/tehtarik.png" alt="" className="h-16 w-16 object-contain" />
                                <div className="ml-4">
                                    <h2 className="text-lg font-bold">Savva Teh Tarik Caramel Flavour</h2>
                                    <p className="text-xs text-gray-500">1 Box Savva Teh Tarik Caramel Flavour (20g x 30 sachets)</p>
                                </div>
                            </div>
                            {/* Price in purple */}
                            <span className="text-lg font-bold text-purple-500 mt-4 sm:mt-0">$15.00 USD</span>
                        </div>

                        <p className="text-sm text-gray-400 mb-6">Value your order before Okt 26, 2024</p>

                        {/* Actions - Buttons aligned horizontally */}
                        <div className="mb-6">
                            <div className="flex flex-col sm:flex-row sm:space-x-4 space-y-4 sm:space-y-0">
                                <button className="bg-purple-500 text-white py-2 px-4 rounded-lg shadow-md">Mark</button>
                                <button className="border border-purple-500 text-purple-500 py-2 px-4 rounded-lg shadow-md">Contact Seller</button>
                                <button className="border border-purple-500 text-purple-500 py-2 px-4 rounded-lg shadow-md">Proof of Bill</button>
                            </div>
                        </div>

                        <div className="">
                            <hr />
                        </div>

                        {/* Customer Details */}
                        <div className="mb-6 p-4">
                            <h3 className="text-xl text-purple-500 font-semibold mb-4">Customers Details</h3>
                            <p className="text-sm mb-2 p-1"><i className="fas fa-user"></i> Rachel Derek</p>
                            <p className="text-sm mb-2 p-1"><i className="fas fa-envelope"></i> RachelDerek14@gmail.com</p>
                            <p className="text-sm p-1"><i className="fas fa-phone"></i> +60 857 225 345 7110</p>
                        </div>

                        {/* Payment Method */}
                        <div className="p-3 border border-gray-300 rounded-3xl shadow-md flex items-center max-w-sm mx-auto">
                            <h3 className="text-sm text-gray-600 mr-8 font">Payment Methods:</h3>
                            <img src="/image/dana.png" alt="" className="h-16 w-16 object-contain" />
                        </div>
                    </div>

                    {/* Payment Summary */}
                    <div className="p-4 sm:p-6 bg-white rounded-lg shadow-md">
                        <h3 className="text-lg font-semibold mb-4">Payment Summary</h3>
                        <div className="mb-2 flex justify-between">
                            <span className="text-gray-600 font-bold">Subtotal (1 items)</span>
                            <span className="text-gray-600">$15.00 USD</span>
                        </div>
                        <div className="mb-2 flex justify-between">
                            <span className="text-gray-600 font-bold">Delivery</span>
                            <span className="text-gray-600">$20.00 USD</span>
                        </div>
                        <div className="mb-2 flex justify-between">
                            <span className="text-gray-600 font-bold">Shipping Discount Subtotal</span>
                            <span className="text-gray-600">- $20.00 USD</span>
                        </div>
                        <div className="mb-2 flex justify-between">
                            <span className="text-gray-600 font-bold">Voucher Used</span>
                            <span className="text-gray-600">- $0.00 USD</span>
                        </div>
                        <hr className="my-4 border-t border-gray-300" />
                        <div className="flex justify-between">
                            <span className="font-bold text-lg">Total Orders :</span>
                            <span className="font-bold text-lg text-purple-500">$15.00 USD</span>
                        </div>
                    </div>
                </div>
            </Drawer>
            <Footer />
        </>
    );
};

export default DetailPrice;
