'use client';

import Link from 'next/link';
import { useState } from 'react';

interface HeaderProps {
  appName?: string;
  appLogo?: string;
  isLoggedIn?: boolean;
}

export function Header({ appName = 'Gaming Tournament', appLogo, isLoggedIn }: HeaderProps) {
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  return (
    <header className="bg-slate-900 border-b border-slate-800 sticky top-0 z-40">
      <div className="container-max py-4">
        <div className="flex items-center justify-between gap-4">
          {/* Logo and Brand */}
          <Link href="/" className="flex items-center gap-3 min-w-0">
            {appLogo ? (
              <img src={appLogo} alt={appName} className="h-10 w-10 object-contain" />
            ) : (
              <div className="w-10 h-10 bg-gradient-to-br from-orange-500 to-yellow-500 rounded-lg flex items-center justify-center">
                <span className="text-white font-bold text-lg">GT</span>
              </div>
            )}
            <div className="hidden sm:block">
              <h1 className="text-lg font-bold gradient-text">{appName}</h1>
              <p className="text-xs text-slate-400">Tournament Platform</p>
            </div>
          </Link>

          {/* Desktop Navigation */}
          <nav className="hidden md:flex items-center gap-6">
            <Link href="/" className="text-slate-300 hover:text-orange-500 transition">
              হোম
            </Link>
            <Link href="/tournaments" className="text-slate-300 hover:text-orange-500 transition">
              টুর্নামেন্ট
            </Link>
            <Link href="/leaderboard" className="text-slate-300 hover:text-orange-500 transition">
              লিডারবোর্ড
            </Link>
            <Link href="/about" className="text-slate-300 hover:text-orange-500 transition">
              সম্পর্কে
            </Link>
          </nav>

          {/* Auth Buttons */}
          <div className="flex items-center gap-3">
            {isLoggedIn ? (
              <>
                <Link href="/dashboard" className="btn btn-secondary btn-small">
                  ড্যাশবোর্ড
                </Link>
                <Link href="/api/auth/logout" className="btn btn-primary btn-small">
                  লগআউট
                </Link>
              </>
            ) : (
              <>
                <Link href="/login" className="btn btn-secondary btn-small">
                  লগইন
                </Link>
                <Link href="/register" className="btn btn-primary btn-small">
                  রেজিস্টার
                </Link>
              </>
            )}

            {/* Mobile Menu Button */}
            <button
              className="md:hidden w-10 h-10 flex items-center justify-center hover:bg-slate-800 rounded"
              onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
            >
              <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                {mobileMenuOpen ? (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M6 18L18 6M6 6l12 12"
                  />
                ) : (
                  <path
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    strokeWidth={2}
                    d="M4 6h16M4 12h16M4 18h16"
                  />
                )}
              </svg>
            </button>
          </div>
        </div>

        {/* Mobile Navigation */}
        {mobileMenuOpen && (
          <nav className="md:hidden mt-4 pt-4 border-t border-slate-800 space-y-3">
            <Link href="/" className="block text-slate-300 hover:text-orange-500 py-2">
              হোম
            </Link>
            <Link href="/tournaments" className="block text-slate-300 hover:text-orange-500 py-2">
              টুর্নামেন্ট
            </Link>
            <Link href="/leaderboard" className="block text-slate-300 hover:text-orange-500 py-2">
              লিডারবোর্ড
            </Link>
            <Link href="/about" className="block text-slate-300 hover:text-orange-500 py-2">
              সম্পর্কে
            </Link>
          </nav>
        )}
      </div>
    </header>
  );
}