import React, { forwardRef, HTMLAttributes } from 'react';

export interface CardProps extends HTMLAttributes<HTMLDivElement> {
    variant?: 'outlined' | 'filled' | 'elevated';
}

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

        return (
            <div {...props} className={classes} ref={ref}>
                {props.children}
            </div>
        );
    },
);

export default Card;
