import NextLink from "next/link"

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

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

import type { ImageVaultAsset } from "@scandic-hotels/common/utils/imageVault"

interface ContentCardProps {
  link?: {
    href: string
    openInNewTab?: boolean
    isExternal?: boolean
  }
  heading: string
  image: ImageVaultAsset
  bodyText: string
  promoText?: string
  className?: string
}

export default function ContentCard({
  heading,
  image,
  bodyText,
  promoText,
  className = "",
  link,
}: ContentCardProps) {
  const card = (
    <article className={`${styles.card} ${className}`}>
      <div className={styles.imageContainer}>
        <Image
          src={image.url}
          alt={image.meta.alt || image.meta.caption || ""}
          className={styles.image}
          fill
          sizes="(min-width: 768px) 413px, 100vw"
          focalPoint={image.focalPoint}
          dimensions={image.dimensions}
        />
        {promoText ? (
          <Chip className={styles.promoTag}>{promoText}</Chip>
        ) : null}
      </div>
      <div className={styles.content}>
        <Typography variant="Title/Subtitle/md">
          <h4>{heading}</h4>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p>{bodyText}</p>
        </Typography>
      </div>
    </article>
  )

  if (!link) return card

  const linkProps = {
    className: styles.link,
    ...(link.openInNewTab && {
      target: "_blank",
      rel: "noopener noreferrer",
    }),
  }

  return (
    <NextLink href={link.href} {...linkProps}>
      {card}
    </NextLink>
  )
}