import Link from "next/link"

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

import {
  getBodyFontColor,
  getButtonTheme,
  getScriptFontColor,
  getTitleFontColor,
} from "./utils"
import { cardVariants } from "./variants"

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

import type { CardProps } from "./card"

export default function Card({
  primaryButton,
  secondaryButton,
  scriptedTopTitle,
  heading,
  bodyText,
  className,
  theme,
  backgroundImage,
  imageHeight,
  imageWidth,
  imageGradient,
  onPrimaryButtonClick,
  onSecondaryButtonClick,
}: CardProps) {
  const buttonTheme = getButtonTheme(theme)
  const titleFontColor = getTitleFontColor(theme)
  const scriptFontColor = getScriptFontColor(theme)
  const bodyFontColor = getBodyFontColor(theme)

  imageHeight = imageHeight || 320

  imageWidth =
    imageWidth ||
    (backgroundImage?.dimensions
      ? backgroundImage.dimensions.aspectRatio * imageHeight
      : 420)

  return (
    <article
      className={cardVariants({
        theme,
        className,
      })}
    >
      {backgroundImage && (
        <div className={imageGradient ? styles.imageWrapper : ""}>
          <Image
            src={backgroundImage.url}
            className={styles.image}
            alt={backgroundImage.meta.alt || backgroundImage.title}
            width={imageWidth}
            height={imageHeight}
            focalPoint={backgroundImage.focalPoint}
          />
        </div>
      )}
      <div className={styles.content}>
        {scriptedTopTitle ? (
          <section className={styles.scriptContainer}>
            <BiroScript
              className={styles.scriptedTitle}
              type="two"
              tilted="small"
              color={scriptFontColor}
            >
              {scriptedTopTitle}
            </BiroScript>
          </section>
        ) : null}
        <Title
          as="h3"
          level="h3"
          textAlign="center"
          textTransform="regular"
          color={titleFontColor}
        >
          {heading}
        </Title>
        {bodyText ? (
          <Body textAlign="center" color={bodyFontColor}>
            {bodyText}
          </Body>
        ) : null}
        <div className={styles.buttonContainer}>
          {primaryButton ? (
            <Button asChild theme={buttonTheme} size="small">
              <Link
                href={primaryButton.href}
                target={primaryButton.openInNewTab ? "_blank" : undefined}
                onClick={onPrimaryButtonClick}
                scroll={primaryButton.scrollOnClick ?? true}
              >
                {primaryButton.title}
              </Link>
            </Button>
          ) : null}
          {secondaryButton ? (
            <Button
              asChild
              theme={buttonTheme}
              size="small"
              intent="secondary"
              disabled
            >
              <Link
                href={secondaryButton.href}
                target={secondaryButton.openInNewTab ? "_blank" : undefined}
                onClick={onSecondaryButtonClick}
                scroll={secondaryButton.scrollOnClick ?? true}
              >
                {secondaryButton.title}
              </Link>
            </Button>
          ) : null}
        </div>
      </div>
    </article>
  )
}
