import React from 'react';

interface CardProps {
  children: React.ReactNode;
  className?: string;
  hover?: boolean;
  padding?: 'sm' | 'md' | 'lg';
}

/**
 * Reusable Card component for content grouping
 * Supports hover effects and customizable padding
 */
export const Card: React.FC<CardProps> = ({
  children,
  className = '',
  hover = false,
  padding = 'md'
}) => {
  const paddingSizes = {
    sm: 'p-4',
    md: 'p-6',
    lg: 'p-8'
  };
  
  const hoverEffect = hover 
    ? 'hover:shadow-xl hover:-translate-y-1 transition-all duration-300' 
    : '';
  
  return (
    <div 
      className={`bg-white rounded-xl shadow-md ${paddingSizes[padding]} ${hoverEffect} ${className}`}
    >
      {children}
    </div>
  );
};