'use client'

import Link from 'next/link'
import { usePathname } from 'next/navigation'
import { Palette, Upload, TrendingUp, Settings, ShoppingBag } from 'lucide-react'

const tabs = [
  { href: '/', label: 'Create', icon: Palette },
  { href: '/upload', label: 'Upload', icon: Upload },
  { href: '/trending', label: 'Trending', icon: TrendingUp },
  { href: '/shop', label: 'Shop', icon: ShoppingBag },
  { href: '/settings', label: 'Settings', icon: Settings },
]

export default function Header() {
  const pathname = usePathname()

  return (
    <header className="fixed top-0 left-0 right-0 z-50 bg-surface/95 backdrop-blur-sm border-b border-slate-700">
      <div className="max-w-7xl mx-auto px-4 h-16 flex items-center justify-between">
        <div className="flex items-center gap-2">
          <div className="w-8 h-8 rounded-lg bg-gradient-to-br from-primary to-secondary flex items-center justify-center">
            <span className="text-white font-bold text-sm">AI</span>
          </div>
          <h1 className="text-xl font-bold text-white">Video Flow</h1>
        </div>

        <nav className="flex items-center gap-1">
          {tabs.map((tab) => {
            const Icon = tab.icon
            const isActive = pathname === tab.href
            return (
              <Link
                key={tab.href}
                href={tab.href}
                className={`flex items-center gap-2 px-4 py-2 rounded-lg transition-colors ${
                  isActive
                    ? 'bg-primary text-white'
                    : 'text-slate-400 hover:text-white hover:bg-slate-700'
                }`}
              >
                <Icon size={18} />
                <span className="text-sm font-medium">{tab.label}</span>
              </Link>
            )
          })}
        </nav>
      </div>
    </header>
  )
}