"use client";

import CommonModal from "@/components/theme/ui/CommonModal";

export function VipPlusRulesModal({
    isShow,
    onClose
}: {
    isShow: boolean;
    onClose: () => void;
}) {


    return (<>
        <CommonModal 
            destroyOnClose={true}
            isOpen={isShow}
            onClose={onClose}
            contentClassName={"left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 w-144.5 rounded-xl bg-white px-6"}
            body={
                <div className="relative py-4">
                    <div className="text-center text-ly-16 font-bold">Asteriahair Plus</div>  
                    <p className="text-center text-ly-14 leading-5 mt-5">
                        In order to provide customers with a better shopping experience, Asteriahair has specially launched Asteriahair PLUS membership (no refund after purchase). PLUS members can enjoy unlimited free shipping, 5% off on each order within 180 days, exclusive instant discounts, exclusive customer service, free returns and other membership privileges.
                    </p>
                    <p className="text-center text-ly-14 leading-5 mt-3">
                        We hope to establish a long-term win-win relationship with you through PLUS. At the same time, we will continue to enrich the rights and interests of PLUS members and provide you with more complete services.
                    </p>
                    <p className="text-center text-ly-14 leading-5 mt-3">
                        Thank you for choosing Asteriahair. We are dedicated to creating the ultimate shopping experience for you!(The final right of interpretation belongs to Asteriahair)
                    </p>
                    <p className="text-center text-ly-14 leading-5 mt-3">
                        Note: PLUS membership can't be used for wholesale orders, clearance and flash sale products.
                    </p>
                    <button className="absolute top-4 right-4 w-6 h-6" onClick={onClose}>
                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon" className="h-6 transition-all ease-in-out hover:scale-110"><path strokeLinecap="round" strokeLinejoin="round" d="M6 18 18 6M6 6l12 12"></path></svg>
                    </button>
                </div>
            }
        />

    </>);
}