Pricing 13

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

import { Button, type ButtonProps } from "@/components/ui/button";
import { Card } from "@/components/ui/card";

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

type Props = {
  tagline: string;
  heading: string;
  description: string;
  pricingPlans: PricingPlan[];
};

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

export const Pricing13 = (props: Pricing13Props) => {
  const { tagline, heading, description, pricingPlans } = {
    ...Pricing13Defaults,
    ...props,
  };

  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <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>
          <h2 className="mb-5 text-h2 font-bold md:mb-6">{heading}</h2>
          <p className="text-medium">{description}</p>
        </div>
        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
          {pricingPlans.map((pricingPlan, index) => (
            <PricingPlan key={index} plan={pricingPlan} />
          ))}
        </div>
      </div>
    </section>
  );
};
const PricingPlan = ({ plan }: { plan: PricingPlan }) => (
  <Card className="flex h-full flex-col justify-between px-6 py-8 md:p-8">
    <div>
      <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">/mo</h4>
          </h1>
          <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>
    <div>
      <Button {...plan.button} className="w-full">
        {plan.button.title}
      </Button>
    </div>
  </Card>
);

export const Pricing13Defaults: Props = {
  tagline: "Tagline",
  heading: "Pricing plan",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  pricingPlans: [
    {
      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",
      ],
      button: { title: "Get started" },
    },
    {
      planName: "Business plan",
      description: "Lorem ipsum dolor sit amet",
      price: "$29",
      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" },
    },
  ],
};