import { ModeToggle } from "@/components/mode-theme";
import { Button } from "@workspace/ui/components/button";
import { BookOpen, ChartNoAxesColumnIncreasing, Compass, LogIn, Pencil } from "lucide-react";
import Link from "next/link";

export function Header() {
  return (
    <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 mx-auto px-4">
        <div className="flex items-center justify-between h-16">
          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center space-x-6">
            {/* Logo */}
            <Link href="/" className="flex items-center space-x-3">
              <div className="w-8 h-8 bg-gradient-to-r from-orange-500 to-red-500 rounded-lg flex items-center justify-center">
                <BookOpen className="w-5 h-5 text-white" />
              </div>
              <span className="text-xl font-bold bg-gradient-to-r from-orange-500 to-red-500 bg-clip-text text-transparent">
                Webnovel Fever
              </span>
            </Link>
            {/* Navigation Links */}
            <div className="flex items-center space-x-2">
              <Button variant="ghost" asChild>
                <Link href="/browse">
                  <Compass className="inline w-4 h-4" />
                  <span>Browse</span>
                </Link>
              </Button>

              <Button variant="ghost" asChild>
                <Link href="/ranking">
                  <ChartNoAxesColumnIncreasing className="inline w-4 h-4 -rotate-90" />
                  <span>Ranking</span>
                </Link>
              </Button>

              <Button variant="ghost" asChild>
                <Link href="/author">
                  <Pencil className="inline w-4 h-4" />
                  <span>Create</span>
                </Link>
              </Button>
            </div>
          </nav>
          {/* Search Bar */}
          <div className="hidden md:flex items-center flex-1 max-w-md mx-8"></div>
          {/* Right Side Actions */}
          <div className="flex items-center space-x-2">
            {/* Theme Toggle */}
            <ModeToggle />
            {/* Creator Library Link */}
            <Button variant="ghost" size="sm" asChild>
              <Link href="/library">
                <BookOpen className="w-4 h-4 mr-1" />
                Library
              </Link>
            </Button>
            {/* User Profile or Sign In */}
            <>
              <Button size="sm" asChild>
                <Link href="/sign-in">
                  <LogIn className="w-4 h-4 mr-1" />
                  Sign In
                </Link>
              </Button>
              <Button size="sm" variant="outline" asChild>
                <Link href="/sign-up">
                  <LogIn className="w-4 h-4 mr-1" />
                  Sign Up
                </Link>
              </Button>
            </>
          </div>
        </div>
      </div>
    </header>
  );
}