import Image from "@/components/Image"
import Button from "@/components/TempDesignSystem/Button"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"

import Subtitle from "../Text/Subtitle"
import TeaserCardSidepeek from "./Sidepeek"
import { teaserCardVariants } from "./variants"

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

import type { TeaserCardProps } from "@/types/components/teaserCard"

export default function TeaserCard({
  title,
  description,
  primaryButton,
  secondaryButton,
  sidePeekButton,
  sidePeekContent,
  image,
  intent,
  alwaysStack = false,
  className,
}: TeaserCardProps) {
  const classNames = teaserCardVariants({ intent, alwaysStack, className })

  return (
    <article className={classNames}>
      {image && (
        <Image
          src={image.url}
          alt={image.meta?.alt || ""}
          className={styles.image}
          width={Math.ceil(image.dimensions.aspectRatio * 200)}
          height={200}
          focalPoint={image.focalPoint}
        />
      )}
      <div className={styles.content}>
        <Subtitle textAlign="left" type="two" color="black">
          {title}
        </Subtitle>
        <Body color="black" className={styles.body}>
          {description}
        </Body>
        {sidePeekButton && sidePeekContent ? (
          <TeaserCardSidepeek
            button={sidePeekButton}
            sidePeekContent={sidePeekContent}
          />
        ) : (
          <div className={styles.ctaContainer}>
            {primaryButton && (
              <Button
                asChild
                intent="primary"
                size="small"
                className={styles.ctaButton}
              >
                <Link
                  href={primaryButton.href}
                  target={primaryButton.openInNewTab ? "_blank" : undefined}
                  color="none"
                >
                  {primaryButton.title}
                </Link>
              </Button>
            )}
            {secondaryButton && (
              <Button
                asChild
                intent="secondary"
                size="small"
                className={styles.ctaButton}
              >
                <Link
                  href={secondaryButton.href}
                  target={secondaryButton.openInNewTab ? "_blank" : undefined}
                >
                  {secondaryButton.title}
                </Link>
              </Button>
            )}
          </div>
        )}
      </div>
    </article>
  )
}
