import Link from 'next/link';
import { useRouter } from 'next/router';

import { useCart } from '../context/CartContext';

const NAV_LINKS = [
  { href: '/', label: 'Home' },
  { href: '/products', label: 'Products' },
  { href: '/cart', label: 'Cart' },
];

export default function SiteLayout({ children }) {
  const router = useRouter();
  const { itemCount } = useCart();

  return (
    <div className="site-shell">
      <header className="site-header">
        <div className="site-header__inner">
          <Link href="/" className="logo">
            <img src="/logo.png" alt="Full Moon Bakehouse" />
            <span>Full Moon Bakehouse</span>
          </Link>

          <nav className="nav-links">
            {NAV_LINKS.map((link) => {
              const isActive = router.pathname === link.href || router.pathname.startsWith(`${link.href}/`);
              const isCart = link.href === '/cart';

              return (
                <Link key={link.href} href={link.href} className={isActive ? 'active' : ''}>
                  {link.label}
                  {isCart && itemCount > 0 ? <span className="badge">{itemCount}</span> : null}
                </Link>
              );
            })}
          </nav>

          <div className="header-actions">
            <Link href="/admin" className="ghost-btn">
              Admin
            </Link>
          </div>
        </div>
      </header>

      <main className="site-main">{children}</main>

      <footer className="site-footer">
        <div className="site-footer__inner">
          <div>
            <strong>Full Moon Bakehouse</strong>
            <p>Eau Claire & Altoona, Wisconsin</p>
          </div>
          <div className="footer-links">
            <Link href="mailto:bonna@fullmoonbakehouse.com">bonna@fullmoonbakehouse.com</Link>
            <Link href="https://www.instagram.com" target="_blank" rel="noreferrer">
              Instagram
            </Link>
          </div>
          <span className="copyright">© {new Date().getFullYear()} Full Moon Bakehouse</span>
        </div>
      </footer>
    </div>
  );
}