import { forwardRef } from 'react';
import { CardProps } from './card.types';
import { Container } from '../container/container';

export const Card = forwardRef<HTMLDivElement, CardProps>(
    ({ variant = 'filled', ...props }, ref) => {
        const extraClassStyles = `m3-card m3-card-${variant} ${props.className ?? ''}`;

        return (
            <Container
                {...props}
                className={extraClassStyles}
                ref={ref}
                variant={variant}
            >
                {props.children}
            </Container>
        );
    },
);
