"use client"
import React from "react";
import dynamic from "next/dynamic";
import { useTranslation } from "node_modules/react-i18next";
const ApexCharts = dynamic(() => import("react-apexcharts"), { ssr: false });

const PendingStorageChart: React.FC = () => {
  const { t } = useTranslation();
  const percent = 93.75;
  const options = {
    chart: { type: "donut" as const },
    labels: [t("Pending storage"), t("Total storage")],
    colors: ["#1976d2", "#e0e0e0"],
    dataLabels: { enabled: false },
    legend: { position: "bottom" as const },
    plotOptions: {
      pie: {
        donut: {
          size: "70%",
          labels: {
            show: true,
            name: { show: false },
            value: {
              show: true,
              fontSize: "32px",
              fontWeight: 600,
              color: "#1976d2",
              formatter: () => `${percent}%`
            },
            total: { show: false }
          }
        }
      }
    },
    stroke: { show: true, width: 2, colors: ['#fff'] }
  };

  return (
    <div style={{
      border: "1px solid #e0e0e0",
      borderRadius: 12,
      padding: 24,
      background: "#fff",
      boxShadow: "0 2px 8px rgba(0,0,0,0.04)"
    }}>
      <div style={{ fontWeight: 600, fontSize: 18, marginBottom: 12 }}>{t("Pending storage")}</div>
      <div style={{ width: 320, height: 320, display: "flex", alignItems: "center", justifyContent: "center", margin: "0 auto" }}>
        <ApexCharts
          options={options}
          series={[15, 1]}
          type="donut"
          width={280}
          height={280}
        />
      </div>
      <div style={{ marginTop: 16, textAlign: "left" }}>
      <div>&nbsp;</div> {t("Pending storage")}: 15
        <div>{t("Total storage")}: 16</div>
        
      </div>
    </div>
  );
};

export default PendingStorageChart;