Pricing Plan Select

"use client";

import {IconCheck, PricingPlan, PricingPlanSelect} from "@brynlabs/fusion-ui";
import React, {useState} from "react";

export const PricingPlanSelectExample = () => {
  const plans: PricingPlan[] = [
    {
      id: "BASIC",
      name: "Basic",
      priceLabel: "Kostenlos",
      priceUnitLabel: "",
      description: "Lorem ipsum dolor sit amet, consectetur adipisicing elit.",
      featuresTitle: "Enthält:",
      features: [{icon: <IconCheck></IconCheck>, text: "Individuelle Anpassung des App-Designs"}],
    },
    {
      id: "ADVANCED",
      name: "Advanced",
      priceLabel: "49 €",
      priceUnitLabel: "/ Monat",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, amet at cupiditate delectus eligendi explicabo fugiat labore necessitatibus quis rerum saepe sunt. Adipisci autem, corporis excepturi facere molestias nihil tenetur?",
      featuresTitle: "Alles in Basic und:",
      features: [{icon: <IconCheck></IconCheck>, text: "Individuelle Anpassung des App-Designs"}],
    },
    {
      id: "PREMIUM",
      name: "Business",
      priceLabel: "99 €",
      priceUnitLabel: "/ Monat",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium, amet at cupiditate delectus eligendi explicabo fugiat labore necessitatibus quis rerum saepe sunt. Adipisci autem, corporis excepturi facere molestias nihil tenetur?",
      featuresTitle: "Alles in Advanced und:",
      features: [{icon: <IconCheck></IconCheck>, text: "Individuelle Anpassung des App-Designs"}],
    },
  ];

  const [activePlanId, setActivePlanId] = useState("BASIC");

  return (
    <PricingPlanSelect
      plans={plans}
      onActivePlanChange={plan => setActivePlanId(plan)}
      activePlan={activePlanId}></PricingPlanSelect>
  );
};