import Link from "@/core/components/elements/Link/Link"
import useCart from "../hooks/useCart"
import Image from "@/core/components/elements/Image/Image"

const Cart = () => {
  const { cart } = useCart()
  
  return (
    <div className="p-4">
      <div className="flex justify-between mb-4">
        <h1 className="font-semibold">Daftar Produk Belanja</h1>
        <Link href="/">Cari Produk Lain</Link>
      </div>
      <div className="flex flex-col gap-y-4">
        { cart.data?.map((product) => (
          <div key={product.id} className="flex">
            <div className="w-4/12">
              <Image src={product?.parent?.image} alt={product?.name} className="object-contain object-center border border-gray_r-6 h-32 w-full rounded-md" />
            </div>
            <div className="flex-1 px-2">
              <div>{ product?.parent?.name }</div>
            </div>
          </div>
        )) }
      </div>
    </div>
  )
}

export default Cart