import React from 'react';


import { Ripple } from './Ripple';

interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
    children: React.ReactNode;
    className?: string;
    noPadding?: boolean;
    variant?: 'elevated' | 'outlined' | 'filled';
}

export const Card: React.FC<CardProps> = ({ className = '', children, noPadding = false, variant = 'elevated', ...props }) => {

    // M3 Card Variants
    // Elevated: Surface Container Low + Shadow + No Border (Default)
    // Outlined: Surface + Border + No Shadow
    // Filled: Surface Container Highest + No Shadow + No Border

    const variants = {
        elevated: "bg-surface-container-low border-none shadow-elevation-1",
        outlined: "bg-surface border border-outline-variant shadow-none",
        filled: "bg-surface-container-high border-none shadow-none"
    };

    return (
        <div
            className={`rounded-xl overflow-hidden relative ${variants[variant]} ${!noPadding ? 'p-4' : ''} ${className}`}
            {...props}
        >
            {props.onClick && <Ripple />}
            {children}
        </div>
    );
};
