"use client";
import { useEffect, useState } from "react";
import { envConfig } from "../lib/config";
import axios from "axios";
import Cookies from "js-cookie";

if (!envConfig.apiUrl) {
  console.error("API URL is not defined in envConfig");
}

interface proms {
  url: string;
}

export default function SelectAreas(props: proms) {
  const [areas, setAreas] = useState([]);
  const [selectedArea, setSelectedArea] = useState("");

  const token = Cookies.get("token");
  const headers = { Authorization: `Bearer ${token}` };


  useEffect(() => {
    axios
      .get(`${envConfig.apiUrl}/area-ubicacion`, { headers }
      )
      .then((data) => {
        setAreas(data.data);
      })
      .catch((error) => {
        console.error("Error al traer las áreas:", error);
      });
  }, []);

  return (
    <div>
      <label htmlFor="areaSelect">Selecciona un área:</label>
      <select
        id="areaSelect"
        value={selectedArea}
        onChange={(e) => setSelectedArea(e.target.value)}
      >
        <option value="">-- Selecciona una opción --</option>
        {areas.map((area: any, index) => (
          <option key={index} value={area.area}>
            {area.area}
          </option>
        ))}
      </select>
    </div>
  );
}
//IO