import { FC } from "react";
import { AddressInputBannerProps } from "./types";

import { Text } from "@shared/components/text";
import { cx } from "@shared/utils";

const variantStyles: Record<string, { bg: string; text: string }> = {
  yellow: { bg: "bg-fill-brand-accent", text: "text" },
  white: { bg: "white", text: "text" },
  navy: { bg: "bg-fill-inverse", text: "text-inverse" },
  green: { bg: "bg-fill-success", text: "text-inverse" },
};

export const AddressInputBanner: FC<AddressInputBannerProps> = props => {
  const {
    title,
    variant = "yellow",
    cta,
    navHeight,
    isVisible,
    renderCheckPlans,
  } = props;

  const style = variantStyles[variant?.toLowerCase()] || variantStyles.yellow;

  if (!isVisible) return null;

  const ctaLabel = cta?.buttonLabel || "Check plans";
  const renderedCheckPlans = renderCheckPlans?.({
    ctaText: ctaLabel,
    buttonVariant: cta?.buttonVariant,
    showButtonAs: "solid",
    cta: cta,
  });

  return (
    <div
      style={{
        top: `${navHeight}px`,
      }}
      className={cx(
        `sticky left-0 right-0 z-[89] w-full shadow-drop transition-all duration-200 bg-${style.bg} text-${style.text}`,
        "flex flex-col items-center justify-center gap-3 p-[10px] lg:flex-row lg:gap-8 lg:px-6 lg:py-[10px]"
      )}
    >
      <Text className="label3 w-full text-center md:label1 lg:w-auto lg:text-left">
        {title}
      </Text>
      {renderedCheckPlans ? <div>{renderedCheckPlans}</div> : null}
    </div>
  );
};