Banner 1

"use client";

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

type Props = {
  iconUrl: string;
  heading: string;
  description: string;
  inputPlaceholder: string;
  button: ButtonProps;
};

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

export const Banner1 = (props: Banner1Props) => {
  const { iconUrl, heading, description, inputPlaceholder, button } = {
    ...Banner1Defaults,
    ...props,
  };

  const [isVisible, setIsVisible] = useState(true);
  const [emailInput, setEmailInput] = useState<string>("");
  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log({
      emailInput,
    });
  };

  if (!isVisible) {
    return null;
  }

  return (
    <section className="px-[5%]">
      <Card className="container relative flex flex-col justify-start p-4 md:flex-row md:items-center md:px-4 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} className="flex-none">
            <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>
        <form
          className="grid w-full max-w-xs flex-1 gap-3 sm:grid-cols-[1fr_max-content] sm:gap-4 lg:flex-none"
          onSubmit={handleSubmit}
        >
          <Input
            id="email"
            type="email"
            placeholder={inputPlaceholder}
            value={emailInput}
            onChange={(e) => setEmailInput(e.target.value)}
          />
          <Button {...button}>{button.title}</Button>
        </form>
        <button
          className="absolute right-2 top-2 ml-4 md:static"
          onClick={() => setIsVisible(false)}
        >
          <Close className="size-8 p-1" />
        </button>
      </Card>
    </section>
  );
};

export const Banner1Defaults: Props = {
  iconUrl: "#",
  heading: "Medium length banner heading goes here",
  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
  inputPlaceholder: "Enter your email",
  button: {
    title: "Sign up",
    size: "sm",
  },
};