'use client'

import axios from "axios";
import { useEffect, useState } from "react";
import { Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";

interface antiguedad{
    antiguedad:string;
    total:number;
}

export default function Antiguedad() {
    const [antiguedad,setAntiguedad]=useState<antiguedad[]>([])

    useEffect(()=>{
        const getAntiguedad = async()=>{
            const response = await axios.get("http://localhost:3001/equipos/grafica")

            setAntiguedad(response.data)
        }
        getAntiguedad()
    },[])

    return (
        <ResponsiveContainer width="100%" aspect={2}>
            <BarChart data={antiguedad}
            width={500}
            height={300}
            margin={{
                top:20,
            }}
            >
                <CartesianGrid strokeDasharray="3 3"/>
                <XAxis dataKey="antiguedad"/>
                <YAxis/>
                <Tooltip/>
                <Legend/>
                <Bar dataKey="total" fill="#0d6efd"/>

            </BarChart>
        </ResponsiveContainer>
    )
}