"use client"

import NextLink from "next/link"
import { useIntl } from "react-intl"

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

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

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

import type { CampaignBannerProps } from "@/components/CampaignBanner/types"

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

  return (
    <div className={styles.innerContent}>
      <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 className={styles.text}>
            {text}
            {bookingCode ? (
              <Typography variant="Body/Supporting text (caption)/smBold">
                <span className={styles.bookingCode}>
                  <MaterialIcon color="CurrentColor" icon="sell" size={16} />
                  {intl.formatMessage(
                    {
                      id: "campaignBanner.codeWithBookingCode",
                      defaultMessage: "Code: {bookingCode}",
                    },
                    { bookingCode }
                  )}
                </span>
              </Typography>
            ) : null}
          </span>
        </Typography>

        {link ? (
          <Typography variant="Link/sm">
            <NextLink
              href={link.url}
              className={styles.link}
              onClick={() => trackClick("BW read more")}
            >
              <span>
                {link.title ||
                  intl.formatMessage({
                    id: "common.readMore",
                    defaultMessage: "Read more",
                  })}
              </span>
            </NextLink>
          </Typography>
        ) : null}
      </MarqueeText>
    </div>
  )
}