import * as React from "react"
import { cn } from "@/lib/utils"
import Link from "next/link"

interface HeaderProps {
  className?: string
}

export function Header({ className }: HeaderProps) {
  return (
    <header
      className={cn(
        "flex items-center justify-center p-4 border-b border-border w-full",
        className
      )}
    >
      <div className="flex items-center w-full max-w-screen-xl mx-auto">
        <div className="flex items-center gap-4">
          <Link href="/">
            <img src="/logo.svg" alt="Logo" className="h-8 w-8" />
          </Link>
        </div>
        <nav className="flex items-center gap-6 ml-auto">
          <Link
            href="/login"
            className="text-sm font-medium text-foreground hover:underline"
          >
            Login
          </Link>
          <Link
            href="/pricing"
            className="text-sm font-medium text-foreground hover:underline"
          >
            Pricing
          </Link>
          <Link
            href="/about"
            className="text-sm font-medium text-foreground hover:underline"
          >
            About
          </Link>
        </nav>
      </div>
    </header>
  )
}