import { Link } from "react-router";

export function Header() {
  return (
    <header className="bg-white border-b border-slate-200 sticky top-0 z-10">
      <div className="max-w-6xl mx-auto px-4 py-3 h-auto min-h-16 flex items-center justify-between">
        <div className="flex items-center space-x-3">
          <div className="bg-blue-600 p-2 rounded-lg shrink-0">
            <img
              src="https://img.icons8.com/ios-filled/50/ffffff/flash-on.png"
              className="w-5 h-5 object-contain"
              alt="logo"
            />
          </div>
          <div>
            <h1 className="font-bold text-lg leading-tight">
              Distributed Systems and Blockchain
            </h1>
            <p className="text-xs text-slate-500">Brainster Next College</p>
          </div>
        </div>

        <div className="flex items-center space-x-4">
          <p className="text-sm text-slate-500 hidden md:block">Chain: Next Testnet</p>

          <Link to="/status" className="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-xl text-sm font-semibold transition-all shadow-sm">
            Connect Wallet
          </Link>
        </div>
      </div>
    </header>
  );
}