import { jsx } from 'react/jsx-runtime';
import React__default, { useMemo } from 'react';
import { cn } from '../../../utils/cn.js';
import { cardTheme } from './Card.theme.js';
import { CardHeader } from './CardHeader.js';
import { CardTitle } from './CardTitle.js';
import { CardSubtitle } from './CardSubtitle.js';
import { CardBody } from './CardBody.js';
import { CardFooter } from './CardFooter.js';

const CardRoot = React__default.forwardRef(({ children, className, theme: customTheme = {}, darkMode = false, ...props }, ref) => {
    const theme = useMemo(() => ({
        ...cardTheme,
        ...customTheme,
    }), [customTheme]);
    return (jsx("div", { ref: ref, className: cn(theme.baseStyle, darkMode && "dark", className), ...props, children: children }));
});
CardRoot.displayName = 'Card';
// Create compound component with proper typing
const Card = Object.assign(CardRoot, {
    Header: CardHeader,
    Title: CardTitle,
    Subtitle: CardSubtitle,
    Body: CardBody,
    Footer: CardFooter,
});

export { Card, CardBody, CardFooter, CardHeader, CardSubtitle, CardTitle };
