import React from 'react';

interface CardProps {
  children: React.ReactNode;
  title?: string;
  subtitle?: string;
  className?: string;
  bodyClassName?: string;
  padding?: boolean;
  shadow?: boolean;
  actions?: React.ReactNode;
}

const Card: React.FC<CardProps> = ({
  children,
  title,
  subtitle,
  className = '',
  bodyClassName = '',
  padding = true,
  shadow = true,
  actions
}) => {
  const cardClasses = `
    bg-white dark:bg-[#1b2e4b] 
    rounded-2xl 
    border border-[#e0e6ed] dark:border-[#253b5c]
    ${shadow ? 'shadow-lg hover:shadow-xl' : ''}
    hover:-translate-y-1 hover:border-primary-200 dark:hover:border-primary-600
    transition-all duration-300
    relative
    ${className}
  `;

  const bodyClasses = `
    ${padding ? 'p-6' : ''}
    ${bodyClassName}
  `;

  return (
    <div className={cardClasses}>
      {(title || subtitle || actions) && (
        <div className="flex items-center justify-between p-6 border-b border-[#e0e6ed] dark:border-[#253b5c]">
          <div>
            {title && (
              <h3 className="text-lg font-semibold text-black dark:text-white">
                {title}
              </h3>
            )}
            {subtitle && (
              <p className="text-sm text-white-dark mt-1">
                {subtitle}
              </p>
            )}
          </div>
          {actions && (
            <div className="flex items-center space-x-2">
              {actions}
            </div>
          )}
        </div>
      )}
      <div className={bodyClasses}>
        {children}
      </div>
    </div>
  );
};

export default Card;