"use client"
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts"
import {
    ChartConfig,
    ChartContainer,
    ChartLegend,
    ChartLegendContent,
    ChartTooltip,
    ChartTooltipContent,
} from "@/components/ui/charts/CustomCharts"
import { useTranslations } from "next-intl";
import { S } from "../typography";

interface BarChartCardProps {
    content: {
        title?: string
        unit?: string,
        data: { [key: string]: string | number; }[]
        config: ChartConfig;
    };
    className?: string
    barSize?: number,
    xLabel?: string,
    yLabel?: string,
    isSliceX?: boolean,
    isShowingX?: boolean,
    isShowingY?: boolean
    legend?: boolean,
    titleCenter?:boolean
}
export default function BarChartCard({ content, className, barSize, xLabel, yLabel,legend, isSliceX, isShowingX=true, isShowingY=true,titleCenter=false }: BarChartCardProps) {
    const { config, data } = content;
    const t = useTranslations()
    return (
        <div className={`flex flex-col gap-6  h-[200px] max-sm:w-[300px] w-[300px]  ${className}`}>
            <div className="flex items-center">
                {yLabel && <p className="pl-10 text-[10px] font-[600] text-[#52525B] -mb-10">{yLabel}</p>}
                <div className={`flex-1 ${titleCenter && "text-center"}`}>
                    {content.title && <S >{t(content.title)}</S>}
                </div>
            </div>
            <ChartContainer config={config} className="h-full w-full relative">
                <BarChart accessibilityLayer data={data}>
                    <CartesianGrid vertical={false} horizontal />
                    {isShowingX && <XAxis
                        dataKey="month"
                        tickLine={false}
                        axisLine={false}
                        tickMargin={8}
                        tickFormatter={(value) => isSliceX ? value.slice(0, 3) : value}
                        label={{
                            value: xLabel ?? "",
                            position: "insideTopRight",
                            offset: 14,
                            dx: 10,
                            className: "text-[10px] text-[#52525B] font-semibold",
                        }}
                    />}
                    {isShowingY && <YAxis
                        tickLine={false}
                        axisLine={false}
                        className="font-semibold"
                        tickMargin={8}
                        tickFormatter={(value) => `${content?.unit ? value + content.unit : value}`}
                    />}
                    <ChartTooltip content={<ChartTooltipContent hideLabel className="border-none" />} />
                    {legend &&
                    <ChartLegend content={<ChartLegendContent />}   className=" flex flex-col gap-0 items-start p-0 "/>
                    }
                    {Object.entries(config).map(([key, lineConfig]) => (
                        <Bar
                            key={key}
                            stackId={"1"}
                            radius={[4, 4, 4, 4]}
                            dataKey={key}
                            barSize={barSize || 20}
                            fill={typeof lineConfig.color === "string" && lineConfig.color || "#888"}
                        />
                    ))}
                </BarChart>
            </ChartContainer>
        </div>
    )
}