Card

<Card card={{
  icon: "🌺",
  tag: "Wellness",
  tagVariant: "coral",
  title: "Morning ritual",
  description: "Start each day with intention.",
}} />

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

interface CardProps {
  card:       CardItem
  className?: string
}

const TAG_CLASS: Record<string, string> = {
  coral:     'card-tag card-tag--coral',
  turquoise: 'card-tag card-tag--turquoise',
  yellow:    'card-tag card-tag--yellow',
  green:     'card-tag card-tag--green',
  pink:      'card-tag card-tag--pink',
}

const ICON_CLASS: Record<string, string> = {
  coral:     'card-icon-el card-icon--coral',
  turquoise: 'card-icon-el card-icon--turquoise',
  yellow:    'card-icon-el card-icon--yellow',
  green:     'card-icon-el card-icon--green',
  pink:      'card-icon-el card-icon--pink',
}

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

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