weather-app/src/components/Header.tsx

import React from "react";
import ChangeAPI from "./ChangeAPI";
import ChangePreferences from "./ChangePreferences";
import { useState } from "react";
import Cookies from "js-cookie";
import logo from "../assets/cloud-sun-fill.png";
import { Github, KeyRound, Settings2 } from "lucide-react";

const Header: React.FC = () => {
  const [apiCard, setApiCard] = useState(false);
  const [preferencesCard, setPreferencesCard] = useState(false);
  const apiKey = Cookies.get("apiKey") || "";

  return (
    <>
      <header className="bg-gradient-to-r from-blue-700 via-blue-600 to-blue-500 text-white shadow-lg py-8 px-6 flex items-center justify-between rounded-b-3xl">
        <div className="flex items-center gap-4">
          <img
            src={logo}
            alt="Weather App Logo"
            className="w-10 h-10 drop-shadow-lg"
          />
          <h1 className="text-4xl font-extrabold tracking-wide drop-shadow-lg">
            Weather App
          </h1>
        </div>
        <div className="flex items-center gap-4">
          {" "}
          {/* Added container for buttons */}
          <button
            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
            onClick={() => setApiCard(true)}
          >
            <span className="flex items-center gap-2">
              <KeyRound />
              Set API Key
            </span>
          </button>
          <button
            className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2"
            onClick={() => setPreferencesCard(true)}
          >
            <span className="flex items-center gap-2">
              <Settings2 />
              Preferences
            </span>
          </button>
          <a
            href="https://github.com/theis-js/weather-app/wiki"
            target="_blank"
            rel="noopener noreferrer"
          >
            <button className="bg-white text-blue-700 font-bold px-6 py-3 rounded-xl shadow-lg hover:bg-blue-100 transition-all border border-blue-200 flex items-center gap-2">
              <span className="flex items-center gap-2">
                <Github /> Docs
              </span>
            </button>
          </a>
        </div>
      </header>
      {apiCard && (
        <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex items-center justify-center z-50 transition-all">
          <div className="bg-white rounded-2xl shadow-2xl p-10 w-full max-w-md relative border-2 border-blue-200">
            <button
              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-2xl font-bold"
              onClick={() => setApiCard(false)}
              aria-label="Close"
            >
              &times;
            </button>
            <ChangeAPI
              currentAPIKey={apiKey}
              onClose={() => setApiCard(false)}
            />
          </div>
        </div>
      )}

      {preferencesCard && (
        <div className="fixed inset-0 bg-gray-900 bg-opacity-60 flex items-center justify-center z-50 transition-all">
          <div className="bg-white rounded-2xl shadow-2xl p-10 w-full max-w-md relative border-2 border-blue-200">
            <button
              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-2xl font-bold"
              onClick={() => setPreferencesCard(false)}
              aria-label="Close"
            >
              &times;
            </button>
            <ChangePreferences onClose={() => setPreferencesCard(false)} />
          </div>
        </div>
      )}
    </>
  );
};

export default Header;