Chart

"use client";

import { Badge } from "@biem/ui/components/ui/badge";
import {
	Card,
	CardContent,
	CardDescription,
	CardHeader,
	CardTitle,
} from "@biem/ui/components/ui/card";
import {
	type ChartConfig,
	ChartContainer,
	ChartTooltip,
	ChartTooltipContent,
} from "@biem/ui/components/ui/chart";
import {
	Bar,
	BarChart,
	CartesianGrid,
	XAxis,
	YAxis,
} from "recharts";

const monthlySales = [
	{ month: "Jan", revenue: 186400 },
	{ month: "Feb", revenue: 174800 },
	{ month: "Mar", revenue: 209600 },
	{ month: "Apr", revenue: 198200 },
	{ month: "May", revenue: 224500 },
	{ month: "Jun", revenue: 217300 },
	{ month: "Jul", revenue: 231700 },
	{ month: "Aug", revenue: 206800 },
	{ month: "Sep", revenue: 248600 },
];

const currency = new Intl.NumberFormat("de-CH", { style: "currency", currency: "CHF" });
const wholeCurrency = new Intl.NumberFormat("de-CH", { style: "currency", currency: "CHF", maximumFractionDigits: 0 });

const chartConfig = {
	revenue: { label: "Sales", color: "var(--chart-1)" },
} satisfies ChartConfig;

export function ChartDefault() {
	const yearToDate = monthlySales.reduce((total, entry) => total + entry.revenue, 0);

	return (
		<div className="w-full max-w-sm">
			<Card>
				<CardHeader>
					<div className="flex flex-wrap items-center justify-between gap-2">
						<CardTitle>Monthly sales</CardTitle>
						<Badge variant="secondary">Jan – Sep 2026</Badge>
					</div>
					<CardDescription>{wholeCurrency.format(yearToDate)} year to date</CardDescription>
				</CardHeader>
				<CardContent>
					<ChartContainer config={chartConfig} className="h-48 w-full aspect-auto" aria-label="Monthly net sales in CHF, January to September 2026">
						<BarChart accessibilityLayer data={monthlySales} margin={{ top: 8, right: 0, bottom: 0, left: 0 }}>
							<CartesianGrid vertical={false}/>
							<XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={8} interval={0} padding={{ left: 4, right: 4 }}/>
							<YAxis tickLine={false} axisLine={false} tickMargin={8} width="auto" domain={[0, (dataMax: number) => dataMax * 1.2]} tickFormatter={(value: number) => `${value / 1000}k`}/>
							<ChartTooltip cursor={false} content={<ChartTooltipContent formatter={(value) => currency.format(Number(value))}/>}/>
							<Bar dataKey="revenue" fill="var(--color-revenue)" radius={[4, 4, 0, 0]} isAnimationActive={false}/>
						</BarChart>
					</ChartContainer>
				</CardContent>
			</Card>
		</div>
	);
}