web/apps/scandic-web/components/ContentCard/index.tsx

"use client"

import { cx } from "class-variance-authority"
import NextLink from "next/link"
import { useIntl } from "react-intl"

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 function ContentCard({
  heading,
  image,
  bodyText,
  promoText,
  className = "",
  link,
}: ContentCardProps) {
  const intl = useIntl()
  const card = (
    <article className={cx(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",
      title: intl.formatMessage({
        id: "common.linkOpenInNewTab",
        defaultMessage: "Opens in a new tab/window",
      }),
    }),
  }

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