Header 137

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

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

type Props = {
  heading: string;
  description: string;
  buttons: ButtonProps[];
  firstImage: ImageProps;
  secondImage: ImageProps;
};

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

export const Header137 = (props: Header137Props) => {
  const { heading, description, buttons, firstImage, secondImage } = {
    ...Header137Defaults,
    ...props,
  };
  return (
    <section className="grid grid-cols-1 items-center gap-y-16 pt-16 md:pt-24 lg:grid-cols-2 lg:pt-0">
      <div className="mx-[5%] sm:max-w-md md:justify-self-start lg:mr-20 lg:ml-[5vw] lg:justify-self-end">
        <h1 className="mb-5 text-h1 font-bold md:mb-6">{heading}</h1>
        <p className="text-medium">{description}</p>
        <div className="mt-6 flex flex-wrap gap-4 md:mt-8">
          {buttons.map((button, index) => (
            <Button key={index} {...button}>
              {button.title}
            </Button>
          ))}
        </div>
      </div>
      <div className="relative flex items-center">
        <div className="absolute w-[45%] pl-[5%] lg:pl-0">
          <img
            src={firstImage.src}
            alt={firstImage.alt}
            className="aspect-[2/3] w-full rounded-image object-cover lg:h-full"
          />
        </div>
        <div className="ml-[10%]">
          <img
            src={secondImage.src}
            alt={secondImage.alt}
            className="w-full rounded-l-image object-cover lg:h-screen lg:max-h-[60rem]"
          />
        </div>
      </div>
    </section>
  );
};

export const Header137Defaults: Props = {
  heading: "Medium length hero 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" }, { title: "Button", variant: "secondary" }],
  firstImage: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image-portrait-dim.png",
    alt: "Relume placeholder image 1",
  },
  secondImage: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 2",
  },
};