import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

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

import type { FullWidthCampaign } from "@/types/trpc/routers/contentstack/startPage"

interface FullWidthCampaignProps {
  content: FullWidthCampaign
  headingLevel?: "h1" | "h2"
}

export default function FullWidthCampaign({
  content,
  headingLevel = "h2",
}: FullWidthCampaignProps) {
  const { background_image, primary_button, secondary_button } = content
  const Hx = headingLevel

  return (
    <div className={styles.container}>
      {background_image ? (
        <Image
          className={styles.image}
          alt={background_image.meta.alt || background_image.meta.caption || ""}
          src={background_image.url}
          focalPoint={background_image.focalPoint}
          sizes="100vw"
          fill
        />
      ) : null}
      <div className={styles.content}>
        <div className={styles.scriptedText}>
          <BiroScript color="baseText" type="two" tilted="small">
            {content.scripted_top_title}
          </BiroScript>
        </div>
        <div className={styles.mainContent}>
          <Typography variant="Title/mdLowCase">
            <Hx className={styles.bodyText}>{content.heading}</Hx>
          </Typography>
          <Typography variant="Body/Lead text">
            <p className={styles.bodyText}>{content.body_text}</p>
          </Typography>
          <div className={styles.buttons}>
            {content.has_primary_button ? (
              <ButtonLink
                href={primary_button.href}
                target={primary_button.openInNewTab ? "_blank" : undefined}
                variant="Primary"
                color="Inverted"
                size="Small"
                typography="Body/Supporting text (caption)/smBold"
                className={styles.button}
              >
                {primary_button.title}
              </ButtonLink>
            ) : null}
            {content.has_secondary_button ? (
              <ButtonLink
                href={secondary_button.href}
                target={secondary_button.openInNewTab ? "_blank" : undefined}
                variant="Secondary"
                size="Small"
                color="Inverted"
                className={styles.button}
                typography="Body/Supporting text (caption)/smBold"
              >
                {secondary_button.title}
              </ButtonLink>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  )
}