"use client";

import * as React from "react";

import { cn } from "@/lib/utils";
import {
  useWidgetContainerSize,
  type WidgetContainerSize,
} from "@/app/customer/_lib/use-widget-container-size";

type DashboardWidgetBodyProps = {
  children: (size: WidgetContainerSize) => React.ReactNode;
  className?: string;
};

export function DashboardWidgetBody({ children, className }: DashboardWidgetBodyProps) {
  const { containerRef, size } = useWidgetContainerSize();

  return (
    <div
      ref={containerRef}
      className={cn("flex min-h-0 flex-1 flex-col overflow-hidden", className)}
    >
      {size.width > 0 ? children(size) : null}
    </div>
  );
}