import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
import Preamble from "@/components/TempDesignSystem/Text/Preamble"
import Title from "@/components/TempDesignSystem/Text/Title"

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

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

interface FullWidthCampaignProps {
  content: FullWidthCampaign
}

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

  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}>
          <Title
            color="baseText"
            textAlign="center"
            textTransform="capitalize"
            level="h3"
          >
            {content.heading}
          </Title>
          <Preamble color="baseText" textAlign="center">
            {content.body_text}
          </Preamble>
          <div className={styles.buttons}>
            {content.has_primary_button ? (
              <Button intent="inverted" size="small" theme="base" asChild>
                <Link
                  href={primary_button.href}
                  target={primary_button.openInNewTab ? "_blank" : undefined}
                  color="none"
                >
                  {primary_button.title}
                </Link>
              </Button>
            ) : null}
            {content.has_secondary_button ? (
              <Button
                intent="secondary"
                size="small"
                theme="primaryStrong"
                asChild
              >
                <Link
                  href={secondary_button.href}
                  target={secondary_button.openInNewTab ? "_blank" : undefined}
                  color="none"
                >
                  {secondary_button.title}
                </Link>
              </Button>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  )
}