import { Button } from "@/components/ui/button"
import CartItem from "@/app/cart/components/CartItem"
import CartSummary from "@/components/CartSummary"
import withLayout from "@/hoc/withLayout"
import { Trash } from "iconsax-react"
import { NextPage } from "next"

const Cart: NextPage = () => {
    return (
        <div className="mt-14 px-20">
            <div className="border-b border-border flex justify-between items-center">
                <div className="flex items-center gap-3 pb-6 border-b-2 border-primary relative top-[1px]">
                    <div>
                        سبد خرید
                    </div>
                    <div className="size-8 rounded-lg bg-[#F2F2F2] flex items-center justify-center text-primary">
                        10
                    </div>
                </div>

                <Button
                    className="bg-white shadow h-10"
                >
                    <div className="flex items-center gap-2">
                        <Trash size={20} color="#AD3434" />
                        <div className="text-sm text-[#AD3434] font-light">حذف همه از سبد خرید</div>
                    </div>
                </Button>
            </div>

            <div className="mt-6 flex gap-6">
                <div className="flex-1 border border-border p-5 rounded-2xl">
                    <CartItem noBorder />
                    <CartItem />
                </div>
                <CartSummary
                    itemsCount={3}
                    itemsPrice={580000}
                    discount={580000}
                    total={80580000}
                    confirmHref="/cart/shipping"
                    confirmLabel="ادامه به آدرس و ارسال"
                    className="w-[360px]"
                />
            </div>
        </div>
    )
}

export default withLayout(Cart)