import React from "react";
import ChangeAPI from "./ChangeAPI";
import { useState } from "react";
import Cookies from "js-cookie";
import logo from "../assets/cloud-sun-fill.svg";

const Header: React.FC = () => {
  const [apiCard, setApiCard] = 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>
        <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"
          onClick={() => setApiCard(true)}
        >
          <span className="flex items-center gap-2">
            <svg
              className="w-5 h-5"
              fill="none"
              stroke="currentColor"
              strokeWidth="2"
              viewBox="0 0 24 24"
            >
              <path d="M12 4v16m8-8H4" />
            </svg>
            Set API Key
          </span>
        </button>
      </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} />
          </div>
        </div>
      )}
    </>
  );
};

export default Header;