"use client"

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 "@/components/CampaignBanner/types"

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

  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 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">
            <span className={styles.fakeLink}>
              {link.title ||
                intl.formatMessage({
                  id: "common.readMore",
                  defaultMessage: "Read more",
                })}
            </span>
          </Typography>
        ) : null}
      </MarqueeText>
    </>
  )
}