"use client";

import { type ReactNode } from "react";
import { cn } from "@/lib/utils";

export interface ChartContainerProps {
  title?: string;
  description?: string;
  children: ReactNode;
  className?: string;
  height?: number;
  footer?: ReactNode;
}

export function ChartContainer({
  title,
  description,
  children,
  className,
  height = 240,
  footer,
}: ChartContainerProps) {
  return (
    <figure className={cn("w-full", className)}>
      {title ? (
        <figcaption className="mb-3">
          <p className="font-onest text-base font-semibold text-ink">{title}</p>
          {description ? (
            <p className="mt-0.5 font-inter text-sm text-muted">{description}</p>
          ) : null}
        </figcaption>
      ) : null}
      <div
        className="w-full"
        style={{ height }}
        role="img"
        aria-label={title ?? "Chart"}
      >
        {children}
      </div>
      {footer ? (
        <div className="mt-3 font-inter text-xs text-muted">{footer}</div>
      ) : null}
    </figure>
  );
}