Layout 580

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

type SubHeadingProps = {
  title: string;
  description: string;
};

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

type Props = {
  tagline: string;
  heading: string;
  description: string;
  subHeadings: SubHeadingProps[];
  buttons: ButtonProps[];
  image: ImageProps;
};

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

export const Layout580 = (props: Layout580Props) => {
  const { tagline, heading, description, subHeadings, buttons, image } = {
    ...Layout580Defaults,
    ...props,
  };
  return (
    <section>
      <div className="px-[5%] py-16 md:py-24 lg:py-28">
        <div className="container">
          <div className="grid grid-cols-1 gap-5 md:grid-cols-2 md:gap-x-12 md:gap-y-8 lg:gap-x-20">
            <div>
              <p className="mb-3 font-semibold md:mb-4">{tagline}</p>
              <h2 className="text-h2 font-bold">{heading}</h2>
            </div>
            <div>
              <p className="mb-6 text-medium md:mb-8">{description}</p>
              <div className="grid grid-cols-1 gap-6 py-2 lg:grid-cols-2">
                {subHeadings.map((subHeading, index) => (
                  <div key={index} className="flex">
                    <div className="mr-4 flex-none self-start">
                      <RelumeIcon className="size-8" />
                    </div>
                    <div>
                      <h6 className="mb-3 text-h6 font-bold md:mb-4">{subHeading.title}</h6>
                      <p>{subHeading.description}</p>
                    </div>
                  </div>
                ))}
              </div>
              <div className="mt-6 flex flex-wrap items-center gap-4 md:mt-8">
                {buttons.map((button, index) => (
                  <Button key={index} {...button}>
                    {button.title}
                  </Button>
                ))}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <img src={image.src} className="aspect-video size-full object-cover" alt={image.alt} />
      </div>
    </section>
  );
};

export const Layout580Defaults: 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.",
  subHeadings: [
    {
      title: "Subheading one",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
    },
    {
      title: "Subheading two",
      description:
        "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
    },
  ],
  buttons: [
    { title: "Button", variant: "secondary" },
    {
      title: "Button",
      variant: "link",
      size: "link",
      iconRight: <ChevronRight />,
    },
  ],
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image",
  },
};