import ButtonLink from "@scandic-hotels/design-system/ButtonLink"
import Image from "@scandic-hotels/design-system/Image"
import Subtitle from "@scandic-hotels/design-system/Subtitle"
import { Typography } from "@scandic-hotels/design-system/Typography"

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 && (
        <div className={styles.imageContainer}>
          <Image
            src={image.url}
            alt={image.meta?.alt || ""}
            className={styles.image}
            focalPoint={image.focalPoint}
            dimensions={image.dimensions}
            fill
          />
        </div>
      )}
      <div className={styles.content}>
        <Subtitle textAlign="left" type="two" color="black">
          {title}
        </Subtitle>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{description}</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>
  )
}