import React from 'react';

export interface CardProps {
  children: React.ReactNode;
  className?: string;
  hover?: boolean;
}

export const Card: React.FC<CardProps> = ({ 
  children, 
  className = '',
  hover = false 
}) => (
  <div
    className={`
      bg-white rounded-xl border border-gray-200 shadow-sm 
      ${hover ? 'hover:shadow-md transition-shadow duration-200' : ''}
      ${className}
    `}
  >
    {children}
  </div>
);

export const CardHeader: React.FC<{ children: React.ReactNode; className?: string }> = ({
  children, className = '',
}) => <div className={`p-6 pb-4 ${className}`}>{children}</div>;

export const CardContent: React.FC<{ children: React.ReactNode; className?: string }> = ({
  children, className = '',
}) => <div className={`p-6 pt-0 ${className}`}>{children}</div>;

export const CardFooter: React.FC<{ children: React.ReactNode; className?: string }> = ({
  children, className = '',
}) => <div className={`p-6 pt-4 border-t border-gray-100 ${className}`}>{children}</div>;