"use client";
import React from "react";
import { useTranslation } from "react-i18next";
import SafeApexCharts from "@/components/charts/SafeApexCharts";

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",
        }}
      >
        <SafeApexCharts
          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;
