// src/components/ui/Card.jsx
import { cloneElement, isValidElement } from 'react'

function neutralIcon(icon) {
  return isValidElement(icon) ? cloneElement(icon, { color: 'currentColor' }) : icon
}
// Surface container with optional header, footer, and elevation variants.
//
// Props:
//   title     — string    — card heading (renders header section)
//   subtitle  — string    — muted subtext below title
//   icon      — ReactNode — optional icon rendered left of the title (use <Icon name="..." size={15} />)
//   action    — ReactNode — optional element rendered right-aligned in the header row (e.g. a Button)
//   footer    — ReactNode — rendered in the card footer
//   children  — ReactNode — card body content
//   variant   — 'flat' | 'elevated' | 'outlined'   (default: 'flat')
//   padding   — boolean   — whether body has padding (default: true)
//   className — extra classes on the root element

export default function Card({
  title,
  subtitle,
  icon,
  action,
  footer,
  children,
  variant = 'flat',
  padding = true,
  className = '',
  style,
}) {
  const hasHeader = Boolean(title || subtitle)

  return (
    <div className={['card', `card-${variant}`, className].filter(Boolean).join(' ')} style={style}>
      {hasHeader && (
        <div className={['card-header', !icon ? 'card-header--no-icon' : ''].filter(Boolean).join(' ')}>
          <div className="card-title-row">
            {neutralIcon(icon)}
            {title && <span className="card-title">{title}</span>}
            {action && <div className="card-header-action">{action}</div>}
          </div>
          {subtitle && <p className="card-subtitle">{subtitle}</p>}
          <div className="card-header-divider" />
        </div>
      )}

      <div className={padding ? 'card-body' : 'card-body-flush'}>
        {children}
      </div>

      {footer && (
        <div className="card-footer">{footer}</div>
      )}
    </div>
  )
}
