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}
          width={1512}
          height={880}
          sizes="(min-width: 1512px) 1512px, 100vw"
        />
      ) : null}
      <div className={styles.content}>
        <BiroScript color="baseText" type="two">
          {content.scripted_top_title}
        </BiroScript>
        <div className={styles.mainContent}>
          <Title color="baseText" textAlign="center" 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>
  )
}
