import Image from "@/components/Image"
import Chip from "@/components/TempDesignSystem/Chip"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"

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

import type { ContentCardLinkProps,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

  return (
    <ContentCardLink
      href={link.href}
      openInNewTab={link.openInNewTab}
      isExternal={link.isExternal}
    >
      {card}
    </ContentCardLink>
  )
}

function ContentCardLink({
  children,
  href,
  openInNewTab,
  isExternal,
}: ContentCardLinkProps) {
  const Component = isExternal ? "a" : Link
  const linkProps = {
    href,
    ...(openInNewTab && {
      target: "_blank",
      rel: "noopener noreferrer",
    }),
  }

  return <Component {...linkProps}>{children}</Component>
}
