frontend/src/components/header.tsx

"use client";

import { Music, Github, Sparkles } from "lucide-react";

export function Header() {
  return (
    <header className="sticky top-0 z-50 border-b bg-background/80 backdrop-blur-xl supports-[backdrop-filter]:bg-background/60 shadow-sm">
      <div className="container mx-auto px-4 py-4 flex items-center justify-between">
        <div className="flex items-center gap-3 group cursor-pointer">
          <div className="relative">
            <Music className="h-7 w-7 text-primary group-hover:scale-110 transition-transform" />
            <Sparkles className="h-3 w-3 text-primary absolute -top-1 -right-1 animate-pulse" />
          </div>
          <div>
            <span className="font-display text-xl font-bold bg-gradient-to-r from-primary to-purple-500 bg-clip-text text-transparent">
              AudioForge
            </span>
            <div className="text-[10px] text-muted-foreground -mt-1">
              AI Music Generation
            </div>
          </div>
        </div>
        <nav className="flex items-center gap-6">
          <a
            href="https://github.com"
            className="flex items-center gap-2 text-sm text-muted-foreground hover:text-foreground transition-all hover:scale-105 group/link"
          >
            <Github className="h-4 w-4 group-hover/link:rotate-12 transition-transform" />
            <span className="hidden sm:inline">GitHub</span>
          </a>
          <div className="px-3 py-1.5 bg-gradient-to-r from-primary/10 to-purple-500/10 border border-primary/20 rounded-full">
            <span className="text-xs font-medium text-primary flex items-center gap-1.5">
              <span className="w-1.5 h-1.5 rounded-full bg-green-500 animate-pulse" />
              Online
            </span>
          </div>
        </nav>
      </div>
    </header>
  );
}