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>
  );
}