'use client';
import Link from 'next/link';
import { ShoppingCart } from 'lucide-react';
import { useStoreContext } from './StoreThemeProvider';
import { useCart } from '@/hooks/useCart';

export function StoreHeader() {
  const { store } = useStoreContext();
  const { count } = useCart();

  return (
    <header className="sticky top-0 z-20 border-b border-ink-100 bg-white/90 backdrop-blur">
      <div className="mx-auto flex max-w-5xl items-center justify-between px-4 py-3">
        <Link href={`/loja/${store.slug}`} className="flex items-center gap-3">
          {store.logoUrl ? (
            // eslint-disable-next-line @next/next/no-img-element
            <img src={store.logoUrl} alt={store.name} className="h-9 w-9 rounded-lg object-cover" />
          ) : (
            <span className="flex h-9 w-9 items-center justify-center rounded-lg text-white" style={{ background: 'var(--store-primary)' }}>
              {store.name.charAt(0)}
            </span>
          )}
          <span className="font-display text-lg font-semibold text-ink-900">{store.name}</span>
        </Link>
        <Link href={`/loja/${store.slug}/carrinho`} className="relative flex items-center gap-2 rounded-lg border border-ink-200 px-3 py-2 text-sm font-medium text-ink-700 hover:bg-ink-50">
          <ShoppingCart className="h-4 w-4" />
          <span className="hidden sm:inline">Carrinho</span>
          {count > 0 && (
            <span className="absolute -right-2 -top-2 flex h-5 min-w-5 items-center justify-center rounded-full px-1 text-xs font-semibold text-white" style={{ background: 'var(--store-primary)' }}>
              {count}
            </span>
          )}
        </Link>
      </div>
    </header>
  );
}