"use client";
import {
  ResponsiveContainer,
  BarChart,
  Bar,
  XAxis,
  YAxis,
  Tooltip,
  CartesianGrid,
  Legend,
} from "recharts";

type TopWishProductsProps = {
  name: string;
  users: number;
};

const TopWishProducts = ({ data } : { data: TopWishProductsProps[]}) => {
  return (
    <div className="w-[100%] h-[420px]">
      <ResponsiveContainer>
        <BarChart
          layout="vertical"
          data={data}
          margin={{
            top: 20,
            right: 30,
            left: 20,
            bottom: 5,
          }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis type="number" />
          <YAxis dataKey="name" type="category" />
          <Tooltip />
          <Legend />
          <Bar dataKey="users" fill="#9c98e1" width={150} />
        </BarChart>
      </ResponsiveContainer>
    </div>
  );
};

export default TopWishProducts;