Pricing 5

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

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

type FeatureSection = {
  heading: string;
  description: string;
};

type PricingPlan = {
  planName: string;
  description: string;
  monthlyPrice: string;
  features: string[];
  button: ButtonProps;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  featureSections: FeatureSection[];
  pricingPlan: PricingPlan;
};

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

export const Pricing5 = (props: Pricing5Props) => {
  const { tagline, heading, description, featureSections, pricingPlan } = {
    ...Pricing5Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-8 w-full max-w-lg 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 w-full grid-cols-1 items-center gap-y-12 md:gap-x-12 md:gap-y-16 lg:grid-cols-2 lg:gap-x-20">
          <div className="grid grid-cols-1 gap-x-6 gap-y-8 py-2">
            {featureSections.map((featureSection, index) => (
              <div key={index} className="flex self-start">
                <div className="mr-6 flex-none self-start">
                  <RelumeIcon className="size-8 text-scheme-text" />
                </div>
                <div>
                  <h3 className="mb-3 text-h6 font-bold md:mb-4">{featureSection.heading}</h3>
                  <p>{featureSection.description}</p>
                </div>
              </div>
            ))}
          </div>
          <div>
            <PricingPlan plan={pricingPlan} />
          </div>
        </div>
      </div>
    </section>
  );
};
const PricingPlan = ({ plan }: { plan: PricingPlan }) => (
  <Card className="h-full px-6 py-8 md:p-8">
    <div className="flex items-start justify-between">
      <div>
        <h4 className="mb-2 text-h5 font-bold">{plan.planName}</h4>
        <p>{plan.description}</p>
      </div>
      <h5 className="text-h1 font-bold">
        {plan.monthlyPrice}
        <h4 className="inline text-h4 font-bold">/mo</h4>
      </h5>
    </div>
    <div className="my-6 h-px w-full shrink-0 bg-scheme-border md:my-8" />
    <p>Includes:</p>
    <div className="mt-3 grid grid-cols-1 gap-y-4 py-2 md:mt-4 md:grid-cols-2 md:gap-x-6">
      {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 className="my-6 h-px w-full shrink-0 bg-scheme-border md:my-8" />
    <div>
      <Button {...plan.button} className="w-full">
        {plan.button.title}
      </Button>
    </div>
  </Card>
);

export const Pricing5Defaults: Props = {
  tagline: "Tagline",
  heading: "Pricing plan",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
  featureSections: [
    {
      heading: "Key feature heading",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
    },
    {
      heading: "Key feature heading",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
    },
    {
      heading: "Key feature heading",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
    },
  ],
  pricingPlan: {
    planName: "Basic plan",
    description: "Lorem ipsum dolor sit amet",
    monthlyPrice: "$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" },
  },
};