import React from "react";
import { FloatingBannerProps, ThemeKey } from "./types";

import { NextImage } from "@shared/components/next-image";
import { Text } from "@shared/components/text";
import { Button } from "@shared/contentful/blocks/button";

export const FloatingBanner: React.FC<FloatingBannerProps> = ({
  title,
  subtitle,
  description,
  disclaimer,
  icon,
  cta,
  background = "navy",
  color = "light",
  enableHeading,
  maxWidth = true,
}) => {
  const bgColorClasses: Record<ThemeKey, string> = {
    blue: "bg-[#07B2E2]",
    green: "bg-[#26B170]",
    yellow: "bg-[#F5FF1E]",
    purple: "bg-[#931D69]",
    white: "bg-white",
    navy: "bg-[#00002D]",
  };

  return (
    <div className="component-container">
      <div
        className={`mx-5 my-8 lg:mx-20 lg:my-12 lg:rounded-surface-lg xl:mx-auto ${maxWidth ? "max-w-120" : ""}`}
      >
        <div
          className={`flex flex-col rounded-surface px-5 py-7 lg:flex-row lg:gap-5 lg:rounded-surface-lg lg:px-16 lg:py-9 ${bgColorClasses[background]} ${color == "dark" ? "text-text" : "text-white"} `}
        >
          {icon && (
            <div className="floating-banner-icon mb-5 flex justify-center lg:mb-0 lg:items-center">
              <div className="h-[80px] w-[80px] overflow-hidden">
                <NextImage
                  width={80}
                  height={80}
                  alt="icon"
                  src={icon}
                ></NextImage>
              </div>
            </div>
          )}
          <div className="flex w-full flex-col justify-center lg:w-4/5">
            {title && (
              <Text
                as={enableHeading ? "h1" : "h2"}
                className={`heading5 mb-3 text-center lg:w-[95%] lg:text-left`}
              >
                {title}
              </Text>
            )}
            {subtitle && (
              <Text
                as={"h3"}
                className={`heading3 mb-3 text-center lg:text-left`}
              >
                {subtitle}
              </Text>
            )}
            {description && (
              <Text
                as="div"
                className="body1 text-center lg:w-[95%] lg:text-left"
              >
                {description}
              </Text>
            )}
          </div>
          {cta && (
            <div className="mt-5 flex flex-shrink-0 justify-center lg:mt-0 lg:items-center">
              <Button
                {...cta}
                buttonVariant="secondary"
                size={{ base: "medium", md: "large" }}
              ></Button>
            </div>
          )}
        </div>
        {disclaimer && (
          <div>
            <Text as="div" className="body3 mt-3 text-center">
              {disclaimer}
            </Text>
          </div>
        )}
      </div>
    </div>
  );
};

export default FloatingBanner;