import { jsx } from 'react/jsx-runtime';
import { createContext, useContext } from 'react';
import { cn } from '../../utils/cn.js';
import { useChartTheme } from './hooks/useChartTheme.js';

const ChartContext = createContext(null);
function useChart() {
    const context = useContext(ChartContext);
    if (!context) {
        throw new Error('useChart must be used within a ChartContainer');
    }
    return context;
}
function ChartContainer({ data, config, className, children, minHeight = 200, width = '100%', height, ...props }) {
    // Provide default empty config if none provided
    const safeConfig = config || {};
    const { chartColors } = useChartTheme({
        config: safeConfig,
        variant: 'default'
    });
    // Only apply inline styles if no sizing classes are detected in className
    const hasWidthClass = (className === null || className === void 0 ? void 0 : className.includes('w-')) || false;
    const hasHeightClass = (className === null || className === void 0 ? void 0 : className.includes('h-')) || false;
    const inlineStyles = {
        ...chartColors,
        // Only apply inline styles if className doesn't have sizing
        ...((!hasWidthClass && width) && {
            width: typeof width === 'number' ? `${width}px` : width
        }),
        ...((!hasHeightClass && height) && {
            height: typeof height === 'number' ? `${height}px` : height
        }),
        ...((!hasHeightClass && !height) && {
            minHeight: typeof minHeight === 'number' ? `${minHeight}px` : minHeight
        }),
    };
    return (jsx(ChartContext.Provider, { value: { data: data || [], config: safeConfig }, children: jsx("div", { className: cn("flex aspect-auto justify-center text-sm", 
            // Add w-full as default if no width class is specified
            !hasWidthClass && "w-full", className), style: inlineStyles, ...props, children: children }) }));
}

export { ChartContainer, useChart };
