import { useEffect } from "react";
import Header from "../../components/Header";
import Layout from "../../components/Layout";
import Link from "../../components/Link";
import { getCart } from "../../helpers/cart";
import ChevronLeftIcon from "../../icons/chevron-left.svg";

export default function Cart() {
  useEffect(() => {
    console.log(getCart());
  })
  return (
    <>
      <Header title={`Keranjang Belanja - Indoteknik`}/>
      <Layout>
        <div className="p-4">
          {/* Progress Bar */}
          <div className="bg-gray_r-2 flex gap-x-2 p-4 rounded-md mb-4">
            <div className="flex gap-x-2 items-center">
              <div className="bg-yellow_r-9 leading-none p-2 rounded-full w-7 text-center text-gray_r-12 text-caption-2">1</div>
              <p className="font-medium text-gray_r-12 text-caption-2">Keranjang</p>
            </div>
            <div className="flex-1 flex items-center">
              <div className="h-0.5 w-full bg-gray_r-7"></div>
            </div>
            <div className="flex gap-x-2 items-center">
              <div className="bg-gray_r-3 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">2</div>
              <p className="font-medium text-gray_r-11 text-caption-2">Pembayaran</p>
            </div>
            <div className="flex-1 flex items-center">
              <div className="h-0.5 w-full bg-gray_r-7"></div>
            </div>
            <div className="flex gap-x-2 items-center">
              <div className="bg-gray_r-3 leading-none p-2 rounded-full w-7 text-center text-gray_r-11 text-caption-2">3</div>
              <p className="font-medium text-gray_r-11 text-caption-2">Selesai</p>
            </div>
          </div>
          {/* [End] Progress Bar */}
          {/* Title */}
          <div className="flex gap-x-2">
            <Link href="/" className="pr-2">
              <ChevronLeftIcon className="w-6 stroke-gray_r-12"/>
            </Link>
            <h1>Keranjang Saya</h1>
          </div>
          {/* [End] Title */}
        </div>
      </Layout>
    </>
  );
}