"use client"
import { Pie, PieChart } from "recharts"
import {
    ChartConfig,
    ChartContainer,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/charts/CustomCharts"
import { useTranslations } from "next-intl";
import { S } from "../typography";

interface LineChartProps {
    content: {
        title?: string
        unit?: string,
        data: { [key: string]: string | number; }[]
        config: ChartConfig;
    };
    className?: string
    flexed?:boolean
    legendGrid?:boolean
}
export default function OverviewPieChartCard({ content, className,flexed,legendGrid }: LineChartProps) {
    const { data, config } = content;
    const t = useTranslations()
    const CustomLegendItem = ({ color, label, value }: { color: string; label: string; value: number | string }) => (
        <li className="flex  items-center justify-between w-full gap-2" >
            <div className="flex  items-center gap-2">
                <div style={{ backgroundColor: color }} className="w-2 h-2 rounded-full"></div>
                <S className="!text-[11px]">{label}</S>
            </div>
            <div style={{ color: color }}>
                <S className="!text-[11px]">{value} {content.unit && content.unit}</S>
            </div>
        </li>
    );
    return (
        <div className={`flex flex-col gap-2  `}>
            {content.title && <S>{t(content.title)}</S>}
            <div className={`flex w-full  h-full  justify-start items-center ${flexed ? "flex-row" : "flex-col"}`}>
                <ChartContainer
                    config={config}
                    className={`w-[100px] h-[100px] lg:w-[150px] lg:h-[135px] ${className}`}
                >
                    <PieChart className="flex flex-row ">
                        <ChartTooltip
                            cursor={false}
                            content={<ChartTooltipContent nameKey="value"  hideLabel className="border-none" />}
                        />
                        <Pie data={content.data} dataKey={"value"} />
                    </PieChart>
                </ChartContainer>
                <ul className={`w-full flex flex-col  ${!legendGrid ? " flex flex-col  lg:gap-3 " : "  grid grid-cols-2  gap-x-3"}`}>
                    {data.map((entry, index) => (
                        <CustomLegendItem
                            key={index}
                            color={entry.fill as string}
                            label={entry.service as string}
                            value={entry.value}
                        />
                    ))}
                </ul>
            </div>
        </div>
    )
}