Banner 4

"use client";

import React, { useState } from "react";
import { Card } from "@/components/ui/card";
import { Close, FacebookLogo, InstagramLogo, LinkedinLogo, RelumeIcon, XLogo } from "relume-icons";

type SocialMediaLink = {
  url: string;
  icon: React.ReactNode;
};

type Props = {
  heading: string;
  description: string;
  iconUrl?: string;
  socialMediaLinks: SocialMediaLink[];
};

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

export const Banner4 = (props: Banner4Props) => {
  const { heading, description, iconUrl, socialMediaLinks } = {
    ...Banner4Defaults,
    ...props,
  };

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

  if (!isVisible) {
    return null;
  }

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

export const Banner4Defaults: Props = {
  heading: "Medium length banner heading goes here",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  iconUrl: "#",
  socialMediaLinks: [
    { url: "#", icon: <FacebookLogo className="size-6 text-scheme-text" /> },
    { url: "#", icon: <InstagramLogo className="size-6 text-scheme-text" /> },
    { url: "#", icon: <XLogo className="size-6 p-0.5 text-scheme-text" /> },
    { url: "#", icon: <LinkedinLogo className="size-6 text-scheme-text" /> },
  ],
};