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

interface GroupCardProps {
  title: string
  titleMono?: boolean
  headerRight?: ReactNode
  meta?: ReactNode
  footer?: ReactNode
  accent?: 'success' | 'warning' | 'error'
  onClick?: () => void
  className?: string
  children: ReactNode
}

export function GroupCard({
  title,
  titleMono = true,
  headerRight,
  meta,
  footer,
  accent,
  onClick,
  className,
  children,
}: GroupCardProps) {
  const rootClass = [
    styles.root,
    accent ? styles[`accent${accent.charAt(0).toUpperCase()}${accent.slice(1)}`] : '',
    className ?? '',
  ].filter(Boolean).join(' ')

  return (
    <div className={rootClass}>
      <div
        className={styles.header}
        onClick={onClick}
        role={onClick ? 'button' : undefined}
        tabIndex={onClick ? 0 : undefined}
        onKeyDown={onClick ? (e) => { if (e.key === 'Enter' || e.key === ' ') onClick() } : undefined}
      >
        <span className={titleMono ? styles.titleMono : styles.title}>{title}</span>
        {headerRight && <div className={styles.headerRight}>{headerRight}</div>}
      </div>
      {meta && <div className={styles.meta}>{meta}</div>}
      <div className={styles.body}>{children}</div>
      {footer && <div className={styles.footer}>{footer}</div>}
    </div>
  )
}
