"use client";

import styles from "./style.module.css";
import Cookies from "js-cookie";
import { useState } from "react";

export default function DownloadTableCount() {
  const [loading, setLoading] = useState(false);

  const handleDownload = async () => {
    setLoading(true);
    const token = Cookies.get("token");
    const headers = { Authorization: `Bearer ${token}` };

    try {
      const response = await fetch(
        `${process.env.NEXT_PUBLIC_API_URL}/equipos/excel/tabla/count`,
        { headers }
      );

      if (!response.ok) {
        throw new Error("Error al descargar el archivo");
      }

      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);

      const a = document.createElement("a");
      a.href = url;
      a.download = "reporte.xlsx";
      document.body.appendChild(a);
      a.click();
      a.remove();

      window.URL.revokeObjectURL(url);
    } catch (error) {
      console.error(error);
      alert("Hubo un problema al descargar el archivo.");
    } finally {
      setLoading(false);
    }
  };

  return (
    <button
      className={styles.downloadBtn}
      onClick={handleDownload}
      disabled={loading} 
    >
      {loading ? (
        <div className={styles.loader}></div>
      ) : (
        <img src="/excel.svg" alt="Excel" className={styles.iconExcel} width={30} height={30}/>
      )}
    </button>
  );
}