Card

<Card><CardHeader>Title</CardHeader><CardBody>Content</CardBody><CardFooter>Footer</CardFooter></Card>

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

interface CardProps {
  card:       CardItem
  className?: string
}

const TAG_CLASS: Record<string, string> = {
  red:    'card-tag card-tag--red',
  teal:   'card-tag card-tag--teal',
  chrome: 'card-tag card-tag--chrome',
  ink:    'card-tag card-tag--ink',
}

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

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