export function WidgetCard({
  title,
  subtitle,
  actions,
  variant,
  children,
  className = '',
  footer,
}) {
  return (
    <section
      className={`card widget-card${variant ? ` card--${variant}` : ''} ${className}`.trim()}
    >
      {(title || actions) && (
        <header className="card-header">
          <div>
            {title && <h3 className="card-title">{title}</h3>}
            {subtitle && <p className="card-subtitle">{subtitle}</p>}
          </div>
          {actions}
        </header>
      )}
      <div className="card-body">{children}</div>
      {footer && <footer className="card-footer">{footer}</footer>}
    </section>
  )
}