import { ResponsiveContainer } from 'recharts';

import { useIsMobile } from '@/hooks/use-mobile';
import { cn } from '@/lib/utils';

interface ChartContainerProps {
  height?: number;
  className?: string;
  'aria-label'?: string;
  children: React.ReactNode;
}

export function ChartContainer({
  height,
  className,
  'aria-label': ariaLabel,
  children,
}: ChartContainerProps) {
  const isMobile = useIsMobile();
  const resolvedHeight = height ?? (isMobile ? 250 : 300);

  return (
    <div role="img" aria-label={ariaLabel} className={cn('w-full', className)}>
      <ResponsiveContainer width="100%" height={resolvedHeight}>
        {children as React.ReactElement}
      </ResponsiveContainer>
    </div>
  );
}