Layout 612

import { Button, type ButtonProps } from "@/components/ui/button";
import { ChevronRight, RelumeIcon } from "relume-icons";

type ListItem = {
  icon: React.ReactNode;
  heading: string;
  description: string;
};

type Props = {
  tagline: string;
  heading: string;
  description: string;
  listItems1: ListItem[];
  listItems2: ListItem[];
  buttons: ButtonProps[];
};

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

export const Layout612 = (props: Layout612Props) => {
  const { tagline, heading, description, listItems1, listItems2, buttons } = {
    ...props,
    ...Layout612Defaults,
  };
  return (
    <section className="px-[5%] py-16 md:py-24 lg:py-28">
      <div className="container">
        <div className="mb-12 max-w-lg 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>

        <ListItemGroup items={listItems1} />
        <ListItemGroup items={listItems2} />

        <div className="mt-8 flex flex-wrap gap-4 md:mt-10 lg:mt-12">
          {buttons.map((button, index) => (
            <Button key={index} {...button}>
              {button.title}
            </Button>
          ))}
        </div>
      </div>
    </section>
  );
};

const ListItemGroup = ({ items }: { items: ListItem[] }) => (
  <div className="grid auto-cols-fr grid-cols-1 md:grid-cols-2 md:gap-16 md:border-t md:border-scheme-border md:py-8 lg:py-12">
    {items.map((item, index) => (
      <div
        key={index}
        className="flex w-full gap-6 border-t border-scheme-border py-6 md:gap-8 md:border-none md:py-0"
      >
        <div className="inline-block flex-none self-start">
          <div className="inline-block flex-none self-start">{item.icon}</div>
        </div>
        <div>
          <div className="mb-3 md:mb-4">
            <h3 className="text-h4 font-bold">{item.heading}</h3>
          </div>
          <p>{item.description}</p>
        </div>
      </div>
    ))}
  </div>
);

export const Layout612Defaults: Props = {
  tagline: "Tagline",
  heading: "Medium length section heading goes here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  listItems1: [
    {
      icon: <RelumeIcon className="size-12" />,
      heading: "Short heading goes here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
    },
    {
      icon: <RelumeIcon className="size-12" />,
      heading: "Short heading goes here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
    },
  ],
  listItems2: [
    {
      icon: <RelumeIcon className="size-12" />,
      heading: "Short heading goes here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
    },
    {
      icon: <RelumeIcon className="size-12" />,
      heading: "Short heading goes here",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
    },
  ],
  buttons: [
    {
      title: "Button",
      variant: "secondary",
    },
    {
      title: "Button",
      variant: "link",
      size: "link",
      iconRight: <ChevronRight className="text-scheme-text" />,
    },
  ],
};