'use client'

import DetailPresenceCardComponent from "@/components/DetailPresenceCardComponent";
import LoadingComponent from "@/components/LoadingComponent";
import axiosInstance from "@/lib/axios";
import { useSession } from "next-auth/react"
import { useEffect, useState } from "react";

export default function attendance(){
    const {data : session} = useSession()
    const [dataAbsenHistory, setDataAbsenHistory] = useState([]);
    const [loadingAbsenHistory, setLoadingAbsenHistory] = useState(true);
    
    useEffect(() => {
        if (session?.accessToken) {
        getDataAbsenHistory(session.accessToken);
        }
    }, [session]);

    const getDataAbsenHistory = async (token) => {
        setLoadingAbsenHistory(true);

        try {
        const response = await axiosInstance.get('/user/get-absen-history-parent?limit=31&page=1', {
            headers: {
            Authorization: `Bearer ${token}`,
            },
        });

        const fetchedData = response?.data?.data ?? []; 
        setDataAbsenHistory(fetchedData.data);

        } catch (error) {
        console.error('Gagal mengambil data riwayat absen:', error);
        }
        setLoadingAbsenHistory(false);
    };
    
    return(
        <div className="min-h-screen">
            <div className="p-4 card-head">
                Kehadiran
            </div>
            <div className="p-4">
                {loadingAbsenHistory ? <><LoadingComponent /></> : dataAbsenHistory.map((item) => (
                            <DetailPresenceCardComponent
                              key={item.id}
                              date={item.date}
                              presences={item.presences}
                            />
                          ))}
            </div>
        </div>
    )
}