"use client";

import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";

import {
	ChartConfig,
	ChartContainer,
	ChartTooltip,
	ChartTooltipContent,
} from "@/components/ui/chart";

const chartConfig = {
	value: {
		label: "Count",
		color: "hsl(var(--chart-1))",
	},
	foldtime: {
		label: "Fold Time",
		color: "hsl(var(--chart-2))",
	},
} satisfies ChartConfig;

export function HourChart({
	chartData,
}: {
	chartData: {
		hour: string;
		value: number;
		foldtime: number;
	}[];
}) {
	return (
		<ChartContainer config={chartConfig}>
			<BarChart accessibilityLayer data={chartData}>
				<CartesianGrid vertical={false} />
				<XAxis
					dataKey="hour"
					tickLine={false}
					tickMargin={10}
					axisLine={false}
				/>
				<ChartTooltip
					cursor={false}
					content={<ChartTooltipContent indicator="line" />}
				/>
				<Bar dataKey="value" fill="var(--color-value)" radius={4} />
				<Bar
					dataKey="foldtime"
					fill="var(--color-foldtime)"
					radius={4}
				/>
			</BarChart>
		</ChartContainer>
	);
}