import type { ReactNode } from 'react';
import { cn } from '@/lib/utils';

const paddings = {
    none: '',
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-6 lg:p-8',
} as const;

type CardProps = {
    padding?: keyof typeof paddings;
    /** Adds the crimson hover border used on clickable-looking cards. */
    interactive?: boolean;
    className?: string;
    children: ReactNode;
};

export default function Card({
    padding = 'md',
    interactive = false,
    className,
    children,
}: CardProps) {
    return (
        <div
            className={cn(
                'border-outline-variant/50 bg-surface-container-low relative rounded-2xl border shadow-sm dark:shadow-lg',
                interactive &&
                    'group hover:border-primary/60 transition-all duration-300 hover:shadow-md',
                paddings[padding],
                className,
            )}
        >
            {children}
        </div>
    );
}