'use client'
import React, { useEffect, useState, useCallback } from 'react';
import { apiInstance } from "@/shared/config/apiConfig";
import { AxiosError } from "axios";

const GoogleAnalyticsWidget = () => {

  const [visitors, setVisitors] = useState<string>("");

   /* const getAnalytics = async () => {
        try {
          const response = await apiInstance.get("/report/google_analytics/");
          return response.data;
        } catch (error: unknown) {
          if (error instanceof AxiosError) console.log(error.message);
        }
      };*/
    
    //const data = await getAnalytics();

    const fetchMyAPI = useCallback(async () => {
      const getAnalytics = async () => {
        try {
          const response = await apiInstance.get("/report/google_analytics/");
          return response.data;
        } catch (error: unknown) {
          if (error instanceof AxiosError) console.log(error.message);
        }
      };
      const data = await getAnalytics();
      setVisitors(data.visitors);
    }, [visitors])

    useEffect(() => {
      fetchMyAPI();
    }, []);

  return (
    <div><p>Total cummulative visitors: {visitors}</p></div>
)

};

export default GoogleAnalyticsWidget;