import React from "react";
import { useState } from "react";
import { fetchWeather } from "../utils/apiFunc";
import Cookies from "js-cookie";

const WeatherCard: React.FC = () => {
  const [city, setCity] = useState("");
  const apiKey = Cookies.get("apiKey") || "";

  const handleCityChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    setCity(event.target.value);
  };

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    fetchWeather(city, apiKey);
  };

  return (
    <div>
      <h2>Weather Card</h2>
      <p>Current Weather will be displayed here</p>
      <form onSubmit={handleSubmit}>
        <label htmlFor="city">Enter City:</label>
        <input
          type="text"
          id="city"
          name="city"
          onChange={handleCityChange}
          value={city}
          placeholder="City Name"
          required
        />
        <button type="submit">Get Weather</button>
      </form>
    </div>
  );
};

export default WeatherCard;