import { Link } from "@tanstack/react-router";
import { Box } from "lucide-react";
import { Button } from "@/components/ui/button";
import { MockupNav } from "./MockupNav";

export function PublicHeader() {
  return (
    <header className="border-b bg-background">
      <div className="mx-auto flex h-14 max-w-6xl items-center gap-4 px-4">
        <Link to="/" className="flex items-center gap-2 font-semibold">
          <Box className="h-5 w-5 text-primary" />
          warpbox.dev
        </Link>
        <nav className="ml-6 hidden gap-1 md:flex">
          <Button asChild variant="ghost" size="sm"><Link to="/about">About</Link></Button>
          <Button asChild variant="ghost" size="sm"><Link to="/docs">Docs</Link></Button>
        </nav>
        <div className="ml-auto flex items-center gap-2">
          <MockupNav />
          <Button asChild variant="ghost" size="sm"><Link to="/login">Login</Link></Button>
          <Button asChild size="sm"><Link to="/register">Register</Link></Button>
        </div>
      </div>
    </header>
  );
}

export function Footer() {
  return (
    <footer className="border-t bg-background">
      <div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-2 px-4 py-4 text-xs text-muted-foreground sm:flex-row">
        <div>warpbox.dev · v0.4.2 · self-hosted</div>
        <div className="flex gap-4">
          <a href="#" className="hover:text-foreground">Terms</a>
          <a href="#" className="hover:text-foreground">Privacy</a>
          <a href="#" className="hover:text-foreground">Contact</a>
        </div>
      </div>
    </footer>
  );
}