Banner 8

"use client";

import React, { useState } from "react";
import { Button, type ButtonProps } from "@/components/ui/button";
import { Close, RelumeIcon } from "relume-icons";

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

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

export const Banner8 = (props: Banner8Props) => {
  const { heading, description, iconUrl, buttons } = {
    ...Banner8Defaults,
    ...props,
  };

  const [isVisible, setIsVisible] = useState(true);

  if (!isVisible) {
    return null;
  }

  return (
    <section className="border-scheme-border relative border-b px-[5%]">
      <div className="flex flex-col justify-start py-4 md:flex-row md:items-center md:py-3">
        <div className="mb-4 mr-7 flex flex-1 items-start md:mb-0 md:mr-8 md:items-center">
          <a href={iconUrl}>
            <RelumeIcon className="text-scheme-text mr-4 hidden size-8 lg:block" />
          </a>
          <div>
            <h2 className="font-semibold">{heading}</h2>
            <p className="text-small">{description}</p>
          </div>
        </div>
        <div className="flex">
          {buttons.map((button, index) => (
            <Button key={index} {...button} className="mr-4 md:ml-4 md:mr-0">
              {button.title}
            </Button>
          ))}
        </div>
        <button className="absolute right-2 md:static md:ml-4" onClick={() => setIsVisible(false)}>
          <Close className="size-8 p-1" />
        </button>
      </div>
    </section>
  );
};

export const Banner8Defaults: Props = {
  heading: "Medium length banner heading goes here",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  iconUrl: "#",
  buttons: [
    {
      title: "Button",
      size: "sm",
    },
    {
      title: "Button",
      size: "sm",
      variant: "secondary",
    },
  ],
};