"use client"
import { CartesianGrid, Line, LineChart, XAxis, YAxis } 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,
    isShowingX?:boolean,
    isShowingY?:boolean
}
export default function OverviewLineChartCard({ content, className,isShowingX = true,isShowingY = true }: LineChartProps) {
    const { data, config } = content;
    const t = useTranslations()
    return (
        <div className={`flex flex-col gap-5   h-[135px]   w-[300px]  ${className}`}>
            {content.title && <S>{t(content.title)}</S>}
            <ChartContainer config={config} className="h-full w-full !-translate-x-7 ">
                <LineChart
                    accessibilityLayer
                    data={data}
                    margin={{
                        left: 12,
                        right: 12,
                    }}
                >
                    <CartesianGrid vertical={false} />
                    {isShowingX && <XAxis
                        dataKey="month"
                        tickLine={false}
                        axisLine={false}
                        tickMargin={8}
                        tickFormatter={(value) => value.slice(0, 3)}
                    />}
                   {isShowingY &&  <YAxis
                        tickLine={false}
                        axisLine={false}
                        className="font-semibold"
                        tickMargin={8}
                        tickFormatter={(value) => `${content?.unit ? value + content.unit : value}`}
                    />}
                    <ChartTooltip cursor={false} content={<ChartTooltipContent className="border-none" />} />
                    {Object.entries(config).map(([key, lineConfig]) => (
                        <Line
                            key={key}
                            dataKey={key}
                            type="monotone"
                            stroke={typeof lineConfig.color === "string" && lineConfig.color || "#888"} strokeWidth={2}
                            fill={typeof lineConfig.color === "string" && lineConfig.color || "#888"}
                            dot={true}
                            r={2}
                        />
                    ))}
                </LineChart>
            </ChartContainer>
        </div>
    )
}