import { GitBranch } from "lucide-react";
import { Button } from "../ui/button";

export function Header() {
  return (
    <header className="border-b border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
      <div className="container mx-auto flex h-16 items-center justify-between px-4">
        <div className="flex items-center gap-6">
          <h1 className="text-xl font-bold">Boilerplate</h1>
          <nav className="hidden md:flex items-center gap-6">
            <a
              href="#templates"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Templates
            </a>
            <a
              href="#features"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Features
            </a>
            <a
              href="#docs"
              className="text-sm text-muted-foreground hover:text-foreground transition-colors"
            >
              Docs
            </a>
          </nav>
        </div>
        <div className="flex items-center gap-4">
          <Button variant="ghost" size="sm">
            <GitBranch className="h-4 w-4 mr-2" />
            GitHub
          </Button>
          <Button size="sm">Get Started</Button>
        </div>
      </div>
    </header>
  );
}