import Body from "@scandic-hotels/design-system/Body"
import Chip from "@scandic-hotels/design-system/Chip"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/Link"
import Subtitle from "@scandic-hotels/design-system/Subtitle"

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

import type { ContentCardProps } from "./contentCard"

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}
        />
        {promoText ? (
          <Chip className={styles.promoTag}>{promoText}</Chip>
        ) : null}
      </div>
      <div className={styles.content}>
        <Subtitle type="two">{heading}</Subtitle>
        <Body>{bodyText}</Body>
      </div>
    </article>
  )

  if (!link) return card

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

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