import React from "react"

import { ChevronRightIcon } from "@/components/Icons"
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 { 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,
  image,
  style = "default",
  alwaysStack = false,
  className,
}: TeaserCardProps) {
  const cardClasses = teaserCardVariants({ style, alwaysStack, className })

  return (
    <article className={cardClasses}>
      {image && (
        <div className={styles.imageContainer}>
          <Image
            src={image.url}
            alt={image.meta?.alt || ""}
            className={styles.backgroundImage}
            width={399}
            height={201}
          />
        </div>
      )}
      <div className={styles.content}>
        <Subtitle textAlign="left" type="two" color="black">
          {title}
        </Subtitle>
        <Body color="black">{description}</Body>
        {!!sidePeekButton ? (
          <Button
            // onClick={() => {
            //   // TODO: Implement sidePeek functionality once SW-341 is merged.
            // }}
            theme="base"
            variant="icon"
            intent="text"
            size="small"
            className={styles.sidePeekCTA}
          >
            {sidePeekButton.title}
            <ChevronRightIcon />
          </Button>
        ) : (
          <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>
  )
}
