'use client';

import { ArrowRight, ShoppingBagIcon } from 'lucide-react';
import { usePathname, useRouter } from 'next/navigation';

const OrderHeader = () => {
  const router = useRouter();
  const pathname = usePathname();
  const isExactOrders = pathname === '/orders';

  const onBackHandler = () => {
    router.back();
  };

  const goToCartPage = () => {
    router.push('/cart');
  };

  return (
    <header className="flex items-center justify-between w-full mb-3 px-4 pt-3">
      <div className="flex items-center gap-3">
        <ArrowRight className="size-5 cursor-pointer" onClick={onBackHandler} />
        <h2 className="text-lg font-bold">سفارش‌ها</h2>
      </div>

      {isExactOrders && (
        <div
          className="relative cursor-pointer inline-block"
          onClick={goToCartPage}
        >
          <div className="size-10 rounded-full flex items-center justify-center">
            <ShoppingBagIcon className="size-6" />
          </div>

          <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-4 h-4 px-1 bg-primary-action text-primary-foreground text-[10px] font-bold rounded-full">
            90
          </span>
        </div>
      )}
    </header>
  );
};

export default OrderHeader;