import { forwardRef, useState } from "react";
import clsx from "clsx";
import { m } from "framer-motion";

import { type BannerData } from "@/types";

import styles from "./styles.module.scss";

interface BannerProps {
  id?: string;
  data: BannerData;
  show?: boolean;
  onClose?: () => void | undefined;
  children?: React.ReactNode;
  yScroll?: number | 0;
}

const BannerComponent = forwardRef<HTMLDivElement, BannerProps>(
  (props, bannerRef) => {
    const { id, data, show, onClose, children, yScroll, ...otherProps } = props;

    const [showClose, setShowClose] = useState(false);

    return (
      <div className={styles.wrapper}>
        <m.div
          id={id}
          ref={bannerRef}
          role="banner"
          className={clsx(styles.banner, {
            [styles.visible]: show,
          })}
          onMouseEnter={() => setShowClose(true)}
          onMouseLeave={() => setShowClose(false)}
          style={{
            transform: `translateY(${yScroll}px)`,
            background: `linear-gradient(175deg, ${data?.backgroundShade?.hex} 0%, ${data?.backgroundBase?.hex} 100%), ${data?.backgroundBase?.hex}`,
          }}
          {...otherProps}
        >
          <a className={styles.button} href={data?.url || "#"} target="_blank">
            {data?.image && data?.image.url && (
              <div className={styles.imgContent}>
                <img id="image" src={data?.image.url} />
              </div>
            )}

            <div
              className={styles.content}
              style={{
                color: data?.textColor?.hex,
              }}
            >
              <span className={styles.title}>{data?.headline}</span>
              <span>{data?.text}</span>
            </div>
          </a>

          <button
            className={clsx(styles.closeBtn, {
              [styles.show]: showClose,
            })}
            onClick={onClose}
          >
            <svg
              width="16"
              height="16"
              viewBox="0 0 16 16"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M12.8839 5.28674C13.4833 4.68735 13.4833 3.71556 12.8839 3.11617C12.2845 2.51678 11.3127 2.51678 10.7133 3.11617L8.00008 5.82938L5.28686 3.11617C4.68748 2.51678 3.71568 2.51678 3.11629 3.11617C2.5169 3.71555 2.5169 4.68735 3.11629 5.28674L5.82951 7.99996L3.11629 10.7132C2.5169 11.3126 2.5169 12.2844 3.11629 12.8838C3.71568 13.4831 4.68748 13.4831 5.28686 12.8838L8.00008 10.1705L10.7133 12.8838C11.3127 13.4831 12.2845 13.4831 12.8839 12.8838C13.4833 12.2844 13.4833 11.3126 12.8839 10.7132L10.1707 7.99996L12.8839 5.28674Z"
                fill={"white"}
              />
            </svg>
          </button>
        </m.div>
      </div>
    );
  },
);

BannerComponent.displayName = "BannerComponent";
export default BannerComponent;