import "./HomeTabBadges.css";

interface HomeTabBadgesProps {
  items: Array<{ accentColor: string; key: string }>;
  maxVisible?: number;
}

export function HomeTabBadges({ items, maxVisible = 3 }: HomeTabBadgesProps) {
  if (items.length === 0) {
    return null;
  }
  return (
    <span className="HomeTabBadges">
      {items.slice(0, maxVisible).map((item, idx) => (
        <span
          key={item.key}
          className="HomeTabBadges-badge"
          style={{
            backgroundColor: item.accentColor,
            zIndex: items.length - idx,
          }}
        />
      ))}
    </span>
  );
}
