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

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

export const CtaCallout: React.FC<CtaCalloutProps> = ({
  title,
  background = "white",
  button,
  color,
  contentAlignment,
  description,
  descriptionAlignment,
  enableHeading,
  subTitle,
  maxWidth = true,
  onModalButtonClick,
  renderCheckPlans,
}) => {
  const bgColorClasses: Record<ThemeKey, string> = {
    navy: "bg-bg-fill-inverse",
    green: "bg-bg-fill-success",
    blue: "bg-bg-fill-brand",
    purple: "bg-bg-fill-brand-tertiary",
    yellow: "bg-bg-fill-brand-accent",
    white: "bg-bg",
  };
  return (
    <div
      className={`${bgColorClasses[background]} component-container px-5 py-16 lg:px-13 lg:py-24 w-full`}
    >
      <div
        className={`${maxWidth ? "mx-auto max-w-120" : ""} color-${color} flex flex-col ${color == "dark" ? "text-text" : "text-text-inverse"}`}
      >
        {title && (
          <Text
            as={enableHeading ? "h1" : "h2"}
            className={`heading2 lg:heading1 text-${contentAlignment}`}
          >
            {title}
          </Text>
        )}
        {subTitle && (
          <Text
            as="h3"
            className={`subheading3 pt-2 lg:subheading1 lg:pt-3 text-${contentAlignment}`}
          >
            {subTitle}
          </Text>
        )}
        {description && (
          <div
            className={`pt-2 text-body1 lg:pt-3 text-${descriptionAlignment} break-words [&_table]:w-full`}
          >
            {description}
          </div>
        )}
        {button || renderCheckPlans ? (
          <div className="flex justify-center pt-5 lg:pt-14">
            <Button
              {...button}
              renderCheckPlans={renderCheckPlans}
              onModalButtonClick={onModalButtonClick}
              size={{ base: "large" }}
            />
          </div>
        ) : null}
      </div>
    </div>
  );
};
export default CtaCallout;