import Link from "next/link"
import { Sparkles } from "lucide-react"

export default function MainLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <div className="min-h-screen flex flex-col">
      <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
        <div className="container flex h-14 items-center px-4 mx-auto">
          <Link href="/" className="flex items-center gap-2 font-semibold mr-8">
            <Sparkles className="size-5 text-primary" />
            <span className="text-lg">ComparAIson</span>
          </Link>

          <div className="flex-1 max-w-md">
            <div className="relative">
              <input
                type="search"
                placeholder="Search comparisons..."
                className="w-full h-8 rounded-lg border border-input bg-muted/50 px-3 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
              />
            </div>
          </div>

          <div className="flex items-center gap-3 ml-auto">
            <Link href="/compare">
              <button className="h-8 px-3 rounded-lg text-sm font-medium bg-primary text-primary-foreground hover:bg-primary/80 transition-colors">
                New Comparison
              </button>
            </Link>
            <div className="size-8 rounded-full bg-muted flex items-center justify-center text-xs font-medium text-muted-foreground">
              U
            </div>
          </div>
        </div>
      </header>

      <main className="flex-1">{children}</main>

      <footer className="border-t py-4">
        <div className="container mx-auto px-4 text-center text-xs text-muted-foreground">
          ComparAIson — AI-powered deep research comparisons
        </div>
      </footer>
    </div>
  )
}