Card

<Card card={{ icon: "🎨", tag: "Design", tagVariant: "yellow", title: "Styled out of the box", description: "Every component is production-ready." }} />

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

interface CardProps {
  card:       CardItem
  className?: string
}

const ICON_CLASS: Record<CardItem['tagVariant'], string> = {
  yellow: 'feature-icon feature-icon--yellow',
  cobalt: 'feature-icon feature-icon--cobalt',
  coral:  'feature-icon feature-icon--coral',
  green:  'feature-icon feature-icon--green',
}

export function Card({ card, className }: CardProps): React.JSX.Element {
  const iconClass = ICON_CLASS[card.tagVariant] ?? 'feature-icon feature-icon--yellow'

  return (
    <div className={cn('dink-feature-card', className)}>
      <span className={iconClass}>{card.icon}</span>
      <Badge variant={card.tagVariant}>{card.tag}</Badge>
      <h3 className="feature-title">{card.title}</h3>
      <p className="feature-desc">{card.description}</p>
    </div>
  )
}