import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"

import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Title from "@/components/TempDesignSystem/Text/Title"

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}
        />
      ) : null}
      <Title as="h4" level="h3" textAlign="center">
        {heading}
      </Title>
      {bodyText ? <Body textAlign="center">{bodyText}</Body> : null}
      <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>
  )
}
