import { BarChart } from "@tremor/react";

const dataFormatter = (number: number) =>
  Intl.NumberFormat("us").format(number).toString();

const EpcBarChart = ({
  chartdata,
}: {
  chartdata: {
    name: string;
    A?: number;
    B?: number;
    C?: number;
    D?: number;
    E?: number;
    F?: number;
    G?: number;
  }[];
}) => (
  <BarChart
    className="w-64 h-40"
    data={chartdata}
    index="name"
    categories={["G", "F", "E", "D", "C", "B", "A"]} // Each treated as a separate series
    colors={[
      "#e41e3b", // Color for 'G'
      "#ef8026", // Color for 'F'
      "#f3a96a", // Color for 'E'
      "#f7cd14", // Color for 'D'
      "#8dbd40", // Color for 'C'
      "#2da55c", // Color for 'B'
      "#117d58", // Color for 'A'
    ]}
    valueFormatter={dataFormatter}
    yAxisWidth={48}
    stack={true}
    showLegend={false}
  />
);

export default EpcBarChart;
