import { HTMLAttributes, PropsWithChildren } from 'react';

type CardProps = PropsWithChildren<
    HTMLAttributes<HTMLDivElement> & {
        hover?: boolean;
    }
>;

export default function Card({ hover = false, className = '', children, ...props }: CardProps) {
    return (
        <div
            className={`rounded-lg border border-outline-variant bg-surface-container-lowest p-6 ${
                hover ? 'transition duration-150 hover:shadow-lift' : ''
            } ${className}`}
            {...props}
        >
            {children}
        </div>
    );
}