

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

const data = [
    { name: "دان", value: 48, color: "#b52424" },
    { name: "وی", value: 38, color: "#C0BCBC" },
    { name: "آنی", value: 19, color: "#7f7376" },
];

export default function CafeVisitPie() {
    return (
        <div dir="ltr" className="w-full h-62 p-6 pb-0 pl-0">
            {/* <p className="text-sm font-medium mb-3 text-right">پربازدیدترین کافه‌ها</p> */}

            <ResponsiveContainer width="100%" height="100%">
                <PieChart>
                    <Tooltip
                        contentStyle={{
                            background: "var(--bg-primary)",
                            border: "1px solid var(--border-color)",
                            color: "var(--text-primary)",
                        }}
                    />
                    <Pie
                        data={data}
                        dataKey="value"
                        cx="50%"
                        cy="50%"
                        // innerRadius={50}
                        outerRadius={80}
                        label={({ value }) => `${value}%`}
                    >
                        {data.map((item, i) => (
                            <Cell key={i} fill={item.color}  />
                        ))}
                    </Pie>
                </PieChart>
            </ResponsiveContainer>
        </div>
    );
}
