"use client"

import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"

import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { MarqueeText } from "@/components/MarqueeText"

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

import type { CampaignBannerProps } from "./types"

export function MobileCampaignBanner({
  tag,
  text,
  link,
  bookingCode,
}: CampaignBannerProps) {
  const intl = useIntl()

  if (bookingCode) {
    return (
      <p>
        <Typography variant="Title/Overline/sm">
          <span className={cx(styles.tag, styles.withBookingCode)}>{tag}</span>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span>
            {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
            <> ∙ {text} </>
            <Typography variant="Body/Supporting text (caption)/smBold">
              <span className={styles.bookingCode}>
                {intl.formatMessage(
                  {
                    id: "campaignBanner.codeWithBookingCode",
                    defaultMessage: "Code: {bookingCode}",
                  },
                  { bookingCode }
                )}
                <MaterialIcon
                  icon="arrow_forward"
                  color="CurrentColor"
                  size={16}
                />
              </span>
            </Typography>
          </span>
        </Typography>
      </p>
    )
  }

  return (
    <>
      <Typography variant="Tag/sm">
        <span className={styles.tag}>{tag}</span>
      </Typography>
      <MarqueeText
        backgroundColor="var(--Surface-Brand-Primary-3-Default)"
        className={styles.marquee}
        textWrapperClassName={styles.marqueeText}
      >
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <span>{text}</span>
        </Typography>
        {link ? (
          <Typography variant="Link/sm">
            <span className={styles.fakeLink}>
              {link.title ||
                intl.formatMessage({
                  id: "common.readMore",
                  defaultMessage: "Read more",
                })}
            </span>
          </Typography>
        ) : null}
      </MarqueeText>
    </>
  )
}