Header 96

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

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

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

export const Header96 = (props: Header96Props) => {
  const { heading, description, buttons } = {
    ...Header96Defaults,
    ...props,
  };
  return (
    <section className="px-[5%] py-12 md:py-16 lg:py-20">
      <div className="container">
        <Card className="relative flex min-h-[32rem] flex-col items-center justify-center p-8 text-center md:min-h-[40rem] md:p-16">
          <div className="w-full max-w-lg">
            <h1 className="mb-5 text-h1 font-bold md:mb-6">{heading}</h1>
            <p className="text-medium">{description}</p>
          </div>
          <div className="mt-6 flex flex-wrap items-center justify-center gap-4 md:mt-8">
            {buttons.map((button, index) => (
              <Button key={index} {...button}>
                {button.title}
              </Button>
            ))}
          </div>
        </Card>
      </div>
    </section>
  );
};

export const Header96Defaults: 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" }],
};