'use client';

import { useCart } from 'components/cart/cart-context';
import { ShoppingCart } from 'lucide-react';
import Link from 'next/link';

export function CartLink() {
  const { cart } = useCart();
  const itemCount = cart?.totalQuantity || 0;

  return (
    <Link href="/cart" className="group -m-2 flex items-center p-2">
      <ShoppingCart
        className="h-6 w-6 flex-shrink-0 text-gray-400 group-hover:text-gray-500"
        aria-hidden="true"
      />
      <span className="ml-2 text-sm font-medium text-gray-700 group-hover:text-gray-800">
        {itemCount}
      </span>
      <span className="sr-only">items in cart, view cart</span>
    </Link>
  );
}