Card

<Card title="Rating Engine" description="Glicko-2 derived skill rating with confidence intervals."><Badge variant="cyan">MMR</Badge></Card>

import { cn } from '@/lib/utils'

interface CardProps {
  title:       string
  description: string
  className?:  string
  children?:   React.ReactNode
}

export function Card({ title, description, className, children }: CardProps): React.JSX.Element {
  return (
    <div className={cn('gaming-card', className)}>
      {children}
      <h3 className="card-title">{title}</h3>
      <p className="card-description">{description}</p>
    </div>
  )
}