'use client';

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

export default function Header() {
  const [isLoggedIn, setIsLoggedIn] = useState(false);

  return (
    <header className="relative w-full border-b border-white/20 bg-black/95 backdrop-blur-sm">
      <div className="absolute inset-0 tech-grid opacity-20"></div>
      <div className="relative mx-auto flex max-w-7xl items-center justify-between px-4 py-4 sm:px-6 lg:px-8">
        {/* Logo */}
        <Link href="/" className="flex items-center group">
          <div className="relative">
            <Image
              src="/100kmphlogo.png"
              alt="100kmph Logo"
              width={100}
              height={100}
              className="rounded"
              priority
            />
            <div className="absolute inset-0 rounded bg-white/10 blur-md group-hover:bg-white/20 transition-all"></div>
          </div>
        </Link>

        {/* Right side: Profile Icon and Login/Logout */}
        <div className="flex items-center gap-4">
          {/* Profile Icon */}
          <button
            onClick={() => {
              // Navigate to profile page
              if (isLoggedIn) {
                // TODO: Navigate to profile page
              }
            }}
            className="flex h-10 w-10 items-center justify-center rounded-lg border border-white/20 bg-black/50 text-white transition-all hover:border-white/40 hover:bg-white/10 hover:shadow-[0_0_15px_rgba(255,255,255,0.3)]"
            aria-label="Profile"
          >
            <svg
              xmlns="http://www.w3.org/2000/svg"
              fill="none"
              viewBox="0 0 24 24"
              strokeWidth={1.5}
              stroke="currentColor"
              className="h-6 w-6"
            >
              <path
                strokeLinecap="round"
                strokeLinejoin="round"
                d="M15.75 6a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0zM4.501 20.118a7.5 7.5 0 0114.998 0A17.933 17.933 0 0112 21.75c-2.676 0-5.216-.584-7.499-1.632z"
              />
            </svg>
          </button>

          {/* Login/Logout Button */}
          <button
            onClick={() => setIsLoggedIn(!isLoggedIn)}
            className="rounded-lg border border-white/30 bg-white/5 px-4 py-2 text-sm font-medium text-white transition-all hover:bg-white/10 hover:border-white/50 hover:shadow-[0_0_15px_rgba(255,255,255,0.4)] hover:text-gray-200"
          >
            {isLoggedIn ? 'Logout' : 'Login'}
          </button>
        </div>
      </div>
    </header>
  );
}