"use client"

import DoughnutChart from "@/component/Chart/DoughnutChart"
import { useGetAnalyticsMemorySummary } from "@/hook/useDashboard"
import { useTranslations } from "next-intl"

export const DbMemoryUsage = () => {
  const trans = useTranslations("dashboard")
  const { data: dataMemory } = useGetAnalyticsMemorySummary()

  return (
    <div className="md:h-full md:flex md:flex-col">
      <h3 className="pb-4 pt-5 text-xl lg:text-2xl leading-[30px] font-bold border-b border-[var(--secondary-20)] border-solid px-4 lg:px-5">
        {trans("ana_memory_usage")}
      </h3>
      <div className="py-4 px-4 lg:px-5 grow overflow-y-auto">
        <DoughnutChart
          data={{
            labels: dataMemory?.data.labels || [],
            datasets: [
              {
                data: dataMemory?.data.datasets || [],
                backgroundColor: ["#1F8BDE", "#40E71B", "#EB2121", "#374151", "#DB9A1D", "#9D00E6", "00D5CE"],
                borderWidth: 0,
                circumference: 180,
                rotation: 270,
                borderRadius: 50,
                cutout: "95%",
                spacing: 10,
              },
            ],
          }}
        />
      </div>
    </div>
  )
}