interface Tier {
  price: string;
  desc: string;
  highlight?: boolean;
}

interface BlogTierCardsProps {
  tiers: Tier[];
}

export function BlogTierCards({ tiers }: BlogTierCardsProps) {
  return (
    <div className="b-tiers">
      {tiers.map((t, i) => (
        <div key={i} className={`b-tier${t.highlight ? " b-tier-highlight" : ""}`}>
          <span className="b-tier-price">{t.price}</span>
          <span
            className="b-tier-desc"
            dangerouslySetInnerHTML={{ __html: t.desc }}
          />
        </div>
      ))}
    </div>
  );
}