import { ComingSoonBadge, ProBadge } from "@/components/plan-badges";
import SettingRow from "@/components/settings/SettingRow";
import SettingsCard from "@/components/settings/SettingsCard";
import { Switch } from "@/components/ui/switch";

/**
 * Locked preview cards of a Pro feature group: title, intro and a disabled
 * switch per feature. Used by the Pro tab previews and the Rules tab.
 */
const PreviewCards = ({ cards, tabKey }) => (
  <>
    {cards.map((card) => (
      <SettingsCard
        key={card.title}
        title={card.title}
        description={card.sub}
        badge={
          card.later ? <ComingSoonBadge /> : <ProBadge label={card.tier} />
        }
      >
        {card.items.map((item, i) => {
          const id = `pcfw-pro-${tabKey}-${card.title.length}-${i}`;
          return (
            <SettingRow
              key={item.title}
              id={id}
              title={item.title}
              description={item.description}
              locked
            >
              <Switch aria-labelledby={id} checked={false} disabled />
            </SettingRow>
          );
        })}
        {!card.items.length && <div className="ino:pb-3" />}
      </SettingsCard>
    ))}
  </>
);

export default PreviewCards;