Pricing 34

import { Check } from "relume-icons";

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

type ImageProps = {
  src: string;
  alt?: string;
};

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

type Props = {
  tagline: string;
  heading: string;
  description: string;
  logos: ImageProps[];
  logoHeading: string;
  pricingPlan: PricingPlan;
};

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

export const Pricing34 = (props: Pricing34Props) => {
  const { tagline, heading, description, logos, logoHeading, pricingPlan } = {
    ...Pricing34Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="grid grid-cols-1 gap-y-12 md:grid-flow-row md:gap-y-16 lg:grid-cols-2 lg:gap-x-20">
          <div>
            <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="mb-8 text-medium md:mb-10 lg:mb-12">{description}</p>
            <h3 className="mb-2 text-h6 font-bold">{logoHeading}</h3>
            <div className="flex flex-wrap items-center gap-x-8 gap-y-6 py-2">
              {logos.map((logo, index) => (
                <img key={index} src={logo.src} className="max-h-12" alt={logo.alt} />
              ))}
            </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}
        <span className="text-h4 font-bold">/mo</span>
      </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 Pricing34Defaults: Props = {
  tagline: "Tagline",
  heading: "Pricing plan",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.",
  logoHeading: "Used by the world's leading companies",
  logos: [
    { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 1" },
    { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 1" },
    { src: "https://d22po4pjz3o32e.cloudfront.net/webflow-logo.svg", alt: "Webflow logo 2" },
    { src: "https://d22po4pjz3o32e.cloudfront.net/relume-logo.svg", alt: "Relume logo 2" },
  ],
  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" },
  },
};