Pricing 9

import { Check, RelumeIcon } from "relume-icons";

import { Button, type ButtonProps } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

type Billing = "monthly" | "yearly";

type PricingPlan = {
  planName: string;
  description: string;
  price: string;
  discount?: string;
  features: string[];
  button: ButtonProps;
};

type Tab = {
  value: Billing;
  tabName: string;
  plans: PricingPlan[];
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  defaultTabValue: Billing;
  tabs: Tab[];
};

export type Pricing9Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const Pricing9 = (props: Pricing9Props) => {
  const { tagline, heading, description, defaultTabValue, tabs } = {
    ...Pricing9Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container max-w-lg">
        <div className="mx-auto mb-12 max-w-lg text-center md:mb-18 lg:mb-20">
          <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
          <h1 className="mb-5 text-h2 font-bold md:mb-6">{heading}</h1>
          <p className="text-medium">{description}</p>
        </div>
        <Tabs defaultValue={defaultTabValue}>
          <TabsList className="mx-auto mb-12 w-fit items-center justify-center rounded-button border border-transparent bg-scheme-foreground p-1">
            {tabs.map((tab, index) => (
              <TabsTrigger
                key={index}
                value={tab.value}
                className="data-[state=active]:bg-scheme-background data-[state=active]:font-medium data-[state=inactive]:bg-transparent"
              >
                {tab.tabName}
              </TabsTrigger>
            ))}
          </TabsList>
          {tabs.map((tab, index) => (
            <TabsContent key={index} value={tab.value} className="data-[state=active]:animate-tabs">
              {tab.plans.map((plan, index) => (
                <PricingPlan key={index} plan={plan} billing={tab.value} />
              ))}
            </TabsContent>
          ))}
        </Tabs>
      </div>
    </section>
  );
};

const PricingPlan = ({ plan, billing }: { plan: PricingPlan; billing: Billing }) => (
  <Card className="flex h-full flex-col justify-between px-6 py-8 md:p-8">
    <div className="flex items-start justify-between">
      <div>
        <div className="mb-4 flex flex-col items-start justify-end">
          <RelumeIcon className="size-12 text-scheme-text" />
        </div>
        <h5 className="mb-2 text-h5 font-bold">{plan.planName}</h5>
        <p>{plan.description}</p>
      </div>
      <div className="text-right">
        <h1 className="text-h1 font-bold">
          {plan.price}
          <h4 className="text-h4 font-bold">{billing === "monthly" ? "/mo" : "/yr"}</h4>
        </h1>
        {billing === "yearly" && "discount" in plan && (
          <p className="mt-2 font-medium">{plan.discount}</p>
        )}
      </div>
    </div>
    <div className="my-6 h-px w-full shrink-0 bg-scheme-border md:my-8" />
    <p>Includes:</p>
    <div className="mt-4 mb-8 grid grid-cols-1 gap-x-6 gap-y-4 py-2 md:grid-cols-2">
      {plan.features.map((feature, index) => (
        <div key={index} className="flex self-start">
          <div className="mr-4 flex-none self-start">
            <Check className="size-6 text-scheme-text" />
          </div>
          <p>{feature}</p>
        </div>
      ))}
    </div>
    <div>
      <Button {...plan.button} className="w-full">
        {plan.button.title}
      </Button>
    </div>
  </Card>
);

export const Pricing9Defaults: Props = {
  tagline: "Tagline",
  heading: "Pricing plan",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  defaultTabValue: "monthly",
  tabs: [
    {
      value: "monthly",
      tabName: "Monthly",
      plans: [
        {
          planName: "Basic plan",
          description: "Lorem ipsum dolor sit amet",
          price: "$19",
          features: [
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
          ],
          button: { title: "Get started" },
        },
      ],
    },
    {
      value: "yearly",
      tabName: "Yearly",
      plans: [
        {
          planName: "Basic plan",
          description: "Lorem ipsum dolor sit amet",
          price: "$180",
          discount: "Save 20% with the annual plan",
          features: [
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
            "Feature text goes here",
          ],
          button: { title: "Get started" },
        },
      ],
    },
  ],
};