"use client"
import { Area, AreaChart, CartesianGrid, 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
        axis?: boolean
        unit?: string,
        data: { [key: string]: string | number; }[]
        config: ChartConfig;
    };
    className?: string
    chartClassName?: string,
    showX?: boolean,
    yLabel?: string
}

export default function AreaChartCard({ content, className, chartClassName, showX, yLabel }: LineChartProps) {
    const { data, config } = content;
    const t = useTranslations();

    return (
        <div className={`flex flex-col   h-full w-[110px] ${className}`}>
            <div className="flex items-center">
                {yLabel && <p className="pl-10 text-[10px] font-[500] text-[#52525B]">{yLabel}</p>}
                <div className="flex-1 text-center">
                    {content.title && <S >{t(content.title)}</S>}
                </div>
            </div>
            <ChartContainer config={config} className={chartClassName}>
                <AreaChart
                    accessibilityLayer
                    data={data}

                >
                    {showX && content.axis &&
                        <XAxis
                            tickLine={false}
                            axisLine={false}
                            className="font-semibold"
                            tickMargin={8}
                            tickFormatter={(value) => {
                                if (value === 1) return "2016";
                                if (value === 6) return "2022";
                                return "";
                            }} />
                    }
                    {content.axis &&
                        <YAxis
                            tickLine={false}
                            axisLine={false}
                            className="font-semibold"
                            tickMargin={8}
                            tickFormatter={(value) => `${content?.unit ? value + content.unit : value}`}
                        />
                    }
                    <CartesianGrid vertical={false} />
                    <ChartTooltip cursor={false} content={<ChartTooltipContent className="border-none" />} />
                    <defs>
                        {Object.keys(config).map((key) => (
                            <linearGradient key={key} id={`fill${key}`} x1="0" y1="0" x2="0" y2="1">
                                <stop
                                    offset="5%"
                                    stopColor={config[key].color}
                                    stopOpacity={0.8}
                                />
                                <stop
                                    offset="95%"
                                    stopColor={config[key].color}
                                    stopOpacity={0.1}
                                />
                            </linearGradient>
                        ))}
                    </defs>

                    {Object.keys(config).map((key) => (
                        <Area
                            key={key}
                            dataKey={key}
                            type="natural"
                            fill={`url(#fill${key})`}
                            fillOpacity={0.4}
                            stroke={config[key].color}
                            stackId="a"
                        />
                    ))}
                </AreaChart>
            </ChartContainer>
        </div>
    );
}