import Body from "@/components/TempDesignSystem/Text/Body"

import Link from "../Link"
import AlertSidepeek from "./Sidepeek"
import { getIconByAlertType } from "./utils"
import { alertVariants } from "./variants"

import styles from "./alert.module.css"

import type { AlertProps } from "./alert"

export default function Alert({
  className,
  variant,
  type,
  heading,
  text,
  link,
  phoneContact,
  sidepeekCtaText,
  sidepeekContent,
}: AlertProps) {
  const classNames = alertVariants({
    className,
    variant,
    type,
  })
  const Icon = getIconByAlertType(type)

  if (!text && !heading) {
    return null
  }

  return (
    <section className={classNames}>
      <div className={styles.content}>
        <span className={styles.iconWrapper}>
          <Icon className={styles.icon} width={24} height={24} />
        </span>
        <div className={styles.innerContent}>
          <div className={styles.textWrapper}>
            {heading ? (
              <Body className={styles.heading} textTransform="bold" asChild>
                <h2>{heading}</h2>
              </Body>
            ) : null}
            {text ? (
              <Body className={styles.text}>
                {text}
                {phoneContact?.phoneNumber ? (
                  <>
                    <span> {phoneContact.displayText} </span>
                    <Link
                      color="burgundy"
                      href={`tel:${phoneContact.phoneNumber.replace(/ /g, "")}`}
                    >
                      {phoneContact.phoneNumber}
                    </Link>
                    {phoneContact.footnote ? (
                      <span>. ({phoneContact.footnote})</span>
                    ) : null}
                  </>
                ) : null}
              </Body>
            ) : null}
          </div>
          {link ? (
            <Link color="burgundy" href={link.url}>
              {link.title}
            </Link>
          ) : null}
          {!link && sidepeekCtaText && sidepeekContent ? (
            <AlertSidepeek
              ctaText={sidepeekCtaText}
              sidePeekContent={sidepeekContent}
            />
          ) : null}
        </div>
      </div>
    </section>
  )
}
