import { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"
import { VariantProps } from "class-variance-authority"
import { TeaserCardSidepeekContent } from "../../types/sidepeekContent"
import { type ButtonProps } from "../Button"
import ButtonLink from "../ButtonLink"
import Image from "../Image"
import { Typography } from "../Typography"
import TeaserCardSidepeek from "./Sidepeek"
import styles from "./teaserCard.module.css"
import { teaserCardVariants } from "./variants"

interface SidePeekButton {
  call_to_action_text: string
}

interface TeaserCardButton extends Pick<ButtonProps, "onPress"> {
  title: string
  href: string
  openInNewTab?: boolean
}
interface TeaserCardProps extends VariantProps<typeof teaserCardVariants> {
  heading: string
  bodyText: string
  primaryButton?: TeaserCardButton
  secondaryButton?: TeaserCardButton
  sidePeekButton?: SidePeekButton
  sidePeekContent?: TeaserCardSidepeekContent
  image?: ImageVaultAsset
  className?: string
}

export function TeaserCard({
  heading,
  bodyText,
  primaryButton,
  secondaryButton,
  sidePeekButton,
  sidePeekContent,
  image,
  style,
  alwaysStack = false,
  className,
}: TeaserCardProps) {
  const classNames = teaserCardVariants({ style, alwaysStack, className })

  return (
    <article className={classNames}>
      {image && (
        <div className={styles.imageContainer}>
          <Image
            src={image.url}
            alt={image.meta?.alt || ""}
            focalPoint={image.focalPoint}
            dimensions={image.dimensions}
            fill
          />
        </div>
      )}
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <p>{heading}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{bodyText}</p>
        </Typography>

        {sidePeekButton && sidePeekContent ? (
          <TeaserCardSidepeek
            button={sidePeekButton}
            sidePeekContent={sidePeekContent}
          />
        ) : (
          <div className={styles.ctaContainer}>
            {primaryButton && (
              <ButtonLink
                variant="Tertiary"
                color="Primary"
                size="sm"
                className={styles.ctaButton}
                href={primaryButton.href}
                target={primaryButton.openInNewTab ? "_blank" : undefined}
              >
                {primaryButton.title}
              </ButtonLink>
            )}
            {secondaryButton && (
              <ButtonLink
                variant="Secondary"
                color="Primary"
                size="sm"
                className={styles.ctaButton}
                href={secondaryButton.href}
                target={secondaryButton.openInNewTab ? "_blank" : undefined}
              >
                {secondaryButton.title}
              </ButtonLink>
            )}
          </div>
        )}
      </div>
    </article>
  )
}