import Link from "next/link"
import { Image, Search } from "lucide-react"

export default function PublicLayout({ children }: { children: React.ReactNode }) {
  return (
    <>
      <header className="sticky top-0 z-40 border-b border-[var(--border)] bg-[var(--background)]/85 backdrop-blur-md">
        <div className="mx-auto flex h-14 max-w-5xl items-center justify-between px-3 sm:px-4">
          <Link href="/" className="flex items-center gap-2.5">
            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-[var(--accent-subtle)]">
              <Image className="h-4 w-4 text-[var(--accent)]" />
            </div>
            <span className="text-sm font-bold tracking-tight">worst-scan</span>
          </Link>
          <nav className="flex items-center gap-2 sm:gap-4">
            <Link
              href="/search"
              className="flex items-center gap-1.5 rounded-lg px-2.5 py-1.5 text-xs text-[var(--muted)] hover:bg-[var(--surface)] hover:text-[var(--foreground)] transition-colors"
            >
              <Search className="h-4 w-4" />
              <span className="hidden sm:inline">Buscar</span>
            </Link>
          </nav>
        </div>
      </header>

      <main className="mx-auto max-w-5xl px-3 py-4 sm:px-4 sm:py-8">{children}</main>

      <footer className="border-t border-[var(--border)] py-6 text-center text-xs text-[var(--muted)] mb-12 sm:mb-0">
        worst-scan &middot; traducción automática de manga
      </footer>
    </>
  )
}