"use client"
import {
  RadialBarChart,
  RadialBar,
  Legend,
  Tooltip,
  ResponsiveContainer,
} from "recharts";


type TopSellingProductsProps = {
  name: string;
  sold: number;
  quantity: number | null;
  fill: string;
};
const TopSellingProducts = ({ data } : {
  data: TopSellingProductsProps[]
}) => {
  //console.log(data);
  return (
    <ResponsiveContainer width="100%" height={400}>
      <RadialBarChart
        innerRadius="18%"
        outerRadius="98%"
        data={data}
        startAngle={180}
        endAngle={0}
      >
        <RadialBar
          label={{ fill: "#666", position: "end" }}
          background
          dataKey="sold"
        />
        <Legend
          iconSize={10}
          width={120}
          height={140}
          layout="vertical"
          verticalAlign="top"
          align="right"
        />
        <Tooltip />
      </RadialBarChart>
    </ResponsiveContainer>
  );
};

export default TopSellingProducts;