import React from 'react';

interface CardProps {
  title?: string;
  description?: string;
  children: React.ReactNode;
  className?: string;
  actions?: React.ReactNode;
}

export function Card({ title, description, children, className = '', actions }: CardProps) {
  return (
    <div className={`cra-card ${className}`}>
      {(title || actions) && (
        <div className="cra-card-header">
          <div>
            {title && <h3 className="cra-card-title">{title}</h3>}
            {description && <p className="cra-card-description">{description}</p>}
          </div>
          {actions && <div className="cra-card-actions">{actions}</div>}
        </div>
      )}
      <div className="cra-card-body">{children}</div>
    </div>
  );
}