Card

<Card card={{
  icon: "👾",
  tag: "ACTION",
  tagVariant: "magenta",
  title: "Shadow Run",
  description: "A game about light and darkness.",
  rating: 4,
}} />

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',
  cyan:    'card-tag card-tag--cyan',
  yellow:  'card-tag card-tag--yellow',
  green:   'card-tag card-tag--green',
}

const ICON_CLASS: Record<string, string> = {
  magenta: 'card-icon-el card-icon--magenta',
  cyan:    'card-icon-el card-icon--cyan',
  yellow:  'card-icon-el card-icon--yellow',
  green:   'card-icon-el card-icon--green',
}

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

  return (
    <div className={cn('retro-game-card', card.locked && 'retro-game-card--locked', className)}>
      {card.locked && (
        <div className="card-locked-overlay">
          <span className="card-locked-label">
            COMING SOON
          </span>
        </div>
      )}

      {/* Icon */}
      <span className={iconClass}>
        {card.icon}
      </span>

      {/* Tag — solid fill */}
      <span className={tagClass}>
        {card.tag}
      </span>

      {/* Title */}
      <h3 className="card-title">
        {card.title}
      </h3>

      {/* Description */}
      <p className="card-description">
        {card.description}
      </p>

      {/* Stars */}
      {card.rating > 0 && (
        <div className="card-stars">
          {Array.from({ length: 5 }, (_, i) => (
            <span
              key={i}
              className={i < card.rating ? 'card-star card-star--active' : 'card-star card-star--inactive'}
            >
              ★
            </span>
          ))}
        </div>
      )}
    </div>
  )
}