import styles from './Card.module.css'
import type { ReactNode } from 'react'

interface CardProps {
  children: ReactNode
  accent?: 'amber' | 'success' | 'warning' | 'error' | 'running' | 'none'
  title?: string
  className?: string
}

export function Card({ children, accent = 'none', title, className }: CardProps) {
  const classes = [
    styles.card,
    accent !== 'none' ? styles[`accent-${accent}`] : '',
    className ?? '',
  ].filter(Boolean).join(' ')

  return (
    <div className={classes}>
      {title && (
        <div className={styles.titleHeader}>
          <h3 className={styles.titleText}>{title}</h3>
        </div>
      )}
      {title ? <div className={styles.body}>{children}</div> : children}
    </div>
  )
}
