/**
 * @ai-summary Reusable card component with Material Design 3
 */

import React from 'react';
import { Card as MuiCard, CardContent } from '@mui/material';

interface CardProps {
  children: React.ReactNode;
  className?: string;
  padding?: 'none' | 'sm' | 'md' | 'lg';
  onClick?: () => void;
}

export const Card: React.FC<CardProps> = ({
  children,
  className,
  padding = 'md',
  onClick,
}) => {
  const paddingStyles = {
    none: 0,
    sm: 1,
    md: 2,
    lg: 3,
  };
  
  return (
    <MuiCard 
      onClick={onClick}
      sx={{ 
        cursor: onClick ? 'pointer' : 'default',
        '&:hover': onClick ? {
          boxShadow: 2
        } : {}
      }}
      className={className}
    >
      <CardContent sx={{ p: paddingStyles[padding] }}>
        {children}
      </CardContent>
    </MuiCard>
  );
};