"use client";

import { createContext, type ReactNode, useState } from "react";

export const ChartValueLabelsContext = createContext(true);

export function ChartCard({ title, subtitle, children, size = "half", tall = false, defaultShowValues = true }: { title: string; subtitle: string; children: ReactNode; size?: "full" | "wide" | "narrow" | "half"; tall?: boolean; defaultShowValues?: boolean }) {
  const [showValues, setShowValues] = useState(defaultShowValues);
  return <article className={`chartCard ${size}`}><div className="chartCardHeader"><div><h3>{title}</h3><p>{subtitle}</p></div><label className="chartValueToggle"><input type="checkbox" checked={showValues} onChange={(event) => setShowValues(event.target.checked)} /><span>Afficher les chiffres</span></label></div><ChartValueLabelsContext.Provider value={showValues}><div className={`chartWrap ${tall ? "tall" : ""}`}>{children}</div></ChartValueLabelsContext.Provider></article>;
}