import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { loyaltyCardVariants } from "./variants"

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

import type { LoyaltyCardProps } from "./loyaltyCard"

export default function LoyaltyCard({
  link,
  image,
  heading,
  bodyText,
  theme = "white",
  className,
}: LoyaltyCardProps) {
  return (
    <article
      className={loyaltyCardVariants({
        className,
        theme,
      })}
    >
      {image ? (
        <Image
          src={image.url}
          width={180}
          height={160}
          className={styles.image}
          alt={image.meta.alt || image.title}
          focalPoint={image.focalPoint}
          dimensions={image.dimensions}
        />
      ) : null}
      <Typography variant="Title/xs" className={styles.heading}>
        <h3>{heading}</h3>
      </Typography>
      {!!bodyText && (
        <Typography
          variant="Body/Paragraph/mdRegular"
          className={styles.bodyText}
        >
          <p>{bodyText}</p>
        </Typography>
      )}
      <div className={styles.buttonContainer}>
        {link ? (
          <Link
            className={styles.link}
            href={link.href}
            target={link.openInNewTab ? "_blank" : undefined}
            textDecoration="underline"
          >
            <MaterialIcon
              icon="arrow_right"
              color="CurrentColor"
              className={styles.icon}
              size={20}
            />
            {link.title}
          </Link>
        ) : null}
      </div>
    </article>
  )
}