import { useState } from "react";
import React from "react";
import { changeAPIcookie } from "../utils/changeAPIcookie";
import { KeyRound } from "lucide-react";

interface Props {
  currentAPIKey: string;
  onClose: () => void;
}

const ChangeAPI: React.FC<Props> = ({ currentAPIKey, onClose }) => {
  const [apiKey, setApiKey] = useState(currentAPIKey);

  const handleUpdate = () => {
    changeAPIcookie(apiKey);
    onClose();
  };

  return (
    <div className="w-full">
      <h2 className="text-2xl font-bold mb-2 text-blue-700">Change API Key</h2>
      <h4 className="mb-2 font-semibold text-gray-600">
        Update your API key to fetch weather data.
      </h4>
      <div className="mb-6 flex items-center gap-2 font-style: italic text-gray-500 flex-wrap text-">
        <p>We are using</p>
        <a
          href="https://openweathermap.org/api"
          className="text-blue-600 font-semibold underline hover:text-blue-800"
          target="_blank"
          rel="noopener noreferrer"
        >
          OpenWeatherMap
        </a>
        <p>API for fetching weather data.</p>
      </div>
      <form className="flex flex-col gap-4">
        <label htmlFor="apiKey" className="font-medium text-gray-700">
          API Key:
        </label>
        <div className="flex items-center gap-2 w-full">
          <KeyRound size={32} />
          <input
            type="text"
            id="apiKey"
            name="apiKey"
            placeholder="Enter your API key"
            value={apiKey}
            onChange={(e) => setApiKey(e.target.value)}
            required
            className="border border-blue-300 rounded-xl px-6 py-3 focus:outline-none focus:ring-2 focus:ring-blue-400 bg-blue-50 text-blue-900 font-mono w-full"
          />
        </div>
        <button
          type="submit"
          className="bg-gradient-to-r from-blue-600 to-blue-400 text-white font-bold px-6 py-3 rounded-xl shadow-lg hover:from-blue-700 hover:to-blue-500 transition-all"
          onClick={handleUpdate}
        >
          Update API Key
        </button>
      </form>
    </div>
  );
};

export default ChangeAPI;