import React from "react";
import ChangeAPI from "./ChangeAPI";
import { useState } from "react";
import Cookies from "js-cookie";

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

  return (
    <>
      <header className="bg-blue-600 text-white shadow-md py-6 px-4 flex items-center justify-between">
        <h1 className="text-3xl font-bold tracking-wide drop-shadow">
          Weather App
        </h1>
        <button
          className="bg-white text-blue-600 font-semibold px-4 py-2 rounded-lg shadow hover:bg-blue-100 transition"
          onClick={() => setApiCard(true)}
        >
          Set API Key
        </button>
      </header>
      {apiCard && (
        <div className="fixed inset-0 bg-gray-800 bg-opacity-40 flex items-center justify-center z-50">
          <div className="bg-white rounded-xl shadow-lg p-8 w-full max-w-md relative">
            <button
              className="absolute top-4 right-4 text-gray-400 hover:text-blue-600 text-xl"
              onClick={() => setApiCard(false)}
              aria-label="Close"
            >
              &times;
            </button>
            <ChangeAPI currentAPIKey={apiKey} />
          </div>
        </div>
      )}
    </>
  );
};

export default Header;