"use client";
import {
  Pie,
  PieChart,
  ResponsiveContainer,
  Tooltip,
  Cell,
  Legend,
} from "recharts";

type OrdersPieProps = {
  data: {
    name: string;
    total: number;
  }[];
};

const OrdersPie = ({ data }: OrdersPieProps) => {
  const COLORS = ["#7a78c1", "#9c98e1", "#766fbc", "#a8a4e3", "#6562a8"];
  const filteredData = data.filter((entry) => entry.total >= 0);
  const total = filteredData.reduce((sum, item) => sum + item.total, 0);

  if (total === 0) {
    return <div className="flex items-center justify-center mx-auto my-auto">
      <h1>No data</h1>
    </div>;
  }

  const renderLabel = ({ percent }: { percent: number }) => {
    return `${(percent * 100).toFixed(0)}%`;
  };

  const renderLegend = (props: any) => {
    const { payload } = props;
    return (
      <ul className="list-none p-0 text-sm max-sm:hidden">
        {payload.map((entry: any, index: number) => (
          <li key={`item-${index}`} className="mb-1">
            <span style={{ color: entry.color }}>{entry.value}</span>:{" "}
            {((entry.payload.total / total) * 100).toFixed(0)}%
          </li>
        ))}
      </ul>
    );
  };
  const data1 = [
    { name: "Group A", value: 400 },
    { name: "Group B", value: 300 },
    { name: "Group C", value: 300 },
    { name: "Group D", value: 200 },
  ];

  return (
    <div style={{ width: "100%", height: 280 }}>
      <ResponsiveContainer
      >
        <PieChart>
          <Pie
            data={filteredData}
            labelLine={true}
            label={renderLabel}
            innerRadius={48}
            outerRadius="76%"
            fill="#8884d8"
            dataKey="total"
          >
            {filteredData.map((entry, index) => {
              const percent = (entry.total / total) * 100;
              const shouldHighlight = percent >= 1 && percent <= 12;
              return (
                <Cell
                  key={`cell-${index}`}
                  fill={COLORS[index % COLORS.length]}
                  strokeWidth={shouldHighlight ? 4 : 2}
                  stroke={shouldHighlight ? "#fff" : "none"}
                />
              );
            })}
          </Pie>
          <Tooltip />
          <Legend
            content={renderLegend}
            layout="vertical"
            align="right"
            verticalAlign="top"
            wrapperStyle={{
              paddingLeft: "10px",
            }}
            className="hidden sm:block sm:static sm:mt-2 md:mt-0 custom-legend"
          />
        </PieChart>
      </ResponsiveContainer>
    </div>
  );
}


export default OrdersPie;