import {
    BarChart,
    Bar,
    XAxis,
    Tooltip,
    ResponsiveContainer,
    Cell,
} from "recharts";

const data = [
    { name: "وی", value: 120 },
    { name: "پل", value: 90 },
    { name: "دولت", value: 60 },
    { name: "و", value: 180 },
    { name: "تریح", value: 100 },
    { name: "دان", value: 110 },
];

const colors = ["#efecec", "#efecec", "#efecec", "#7f7376", "#efecec", "#efecec"];

export default function CafePopularity() {
    return (
        <div className="w-full h-72 p-6">
            {/* <p className="text-sm font-medium mb-3 text-right">محبوب‌ترین کافه‌ها</p> */}

            <ResponsiveContainer width="100%" height="100%">
                <BarChart data={data}>
                    <XAxis dataKey="name" />
                    <Tooltip
                        contentStyle={{
                            background: "none",
                            border: "none",
                            color: "var(--color-text1)",
                        }}
                    />
                    <Bar
                        dataKey="value"
                        radius={[20, 20, 20, 20]}
                        cursor="default" 
                    >
                        {data.map((entry, i) => (
                            <Cell key={i} fill={colors[i]} />
                        ))}
                    </Bar>

                </BarChart>
            </ResponsiveContainer>
        </div>
    );
}