import * as React from 'react'
import { cn } from './cva'

export interface CardProps {
  header?: React.ReactNode
  footer?: React.ReactNode
  children: React.ReactNode
  padded?: boolean
  className?: string
}

export function Card({ header, footer, children, padded = true, className }: CardProps) {
  const headingId = React.useId()
  const pad = padded ? 'p-4' : ''
  return (
    <article
      aria-labelledby={header != null ? headingId : undefined}
      className={cn('rounded-lg border border-border bg-surface text-fg', className)}
    >
      {header != null ? (
        <header id={headingId} className={cn('border-b border-border', pad)}>
          {header}
        </header>
      ) : null}
      <div className={pad}>{children}</div>
      {footer != null ? <footer className={cn('border-t border-border', pad)}>{footer}</footer> : null}
    </article>
  )
}