Card

<Card card={{ icon: "01", tag: "Core", title: "Visual Engine", description: "Real-time reactive graphics synced to audio." }} />

import { cn } from '@/lib/utils'
import type { CardItem } from '@/types'

interface CardProps {
  card:       CardItem
  className?: string
}

const TAG_CLASS: Record<string, string> = {
  magenta: 'card-tag card-tag--magenta',
  yellow:  'card-tag card-tag--yellow',
  chrome:  'card-tag card-tag--chrome',
  green:   'card-tag card-tag--green',
  cyan:    'card-tag card-tag--cyan',
}

export function Card({ card, className }: CardProps): React.JSX.Element {
  const tagClass = TAG_CLASS[card.tagVariant] ?? 'card-tag card-tag--yellow'

  return (
    <div className={cn('pinball-card', className)}>
      <div className="card-number">{card.icon}</div>
      <div className="card-title">{card.title}</div>
      <p className="card-description">{card.description}</p>
      <span className={tagClass}>{card.tag}</span>
    </div>
  )
}