import { cx } from "class-variance-authority"
import Link from "next/link"

import Image from "@scandic-hotels/design-system/Image"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
import { Typography } from "@scandic-hotels/design-system/Typography"

import { getButtonTheme } from "./utils"
import { cardVariants } from "./variants"

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

import type { CardProps } from "./card"

export default function Card({
  primaryButton,
  secondaryButton,
  scriptedTopTitle,
  heading,
  bodyText,
  className,
  theme,
  backgroundImage,
  imageGradient,
  onPrimaryButtonClick,
  onSecondaryButtonClick,
  height,
}: CardProps) {
  const buttonTheme = getButtonTheme(theme)

  return (
    <article
      className={cardVariants({
        theme,
        height,
        className,
      })}
    >
      {backgroundImage && (
        <div
          className={cx(styles.imageContainer, {
            [styles.imageGradient]: imageGradient,
          })}
        >
          <Image
            src={backgroundImage.url}
            className={styles.image}
            alt={backgroundImage.meta.alt || backgroundImage.title}
            fill
            sizes="(min-width: 1367px) 700px, 900px"
            focalPoint={backgroundImage.focalPoint}
            dimensions={backgroundImage.dimensions}
          />
        </div>
      )}
      <div className={styles.content}>
        {scriptedTopTitle && (
          <section className={styles.scriptContainer}>
            <Typography variant="Title/Decorative/md">
              <span className={styles.scriptedTitle}>{scriptedTopTitle}</span>
            </Typography>
          </section>
        )}
        <Typography variant="Title/smLowCase" className={styles.heading}>
          <h3>{heading}</h3>
        </Typography>
        {bodyText && (
          <Typography
            variant="Body/Paragraph/mdRegular"
            className={styles.bodyText}
          >
            <p>{bodyText}</p>
          </Typography>
        )}
        <div className={styles.buttonContainer}>
          {primaryButton ? (
            <Button
              asChild
              theme={buttonTheme}
              size="small"
              className={styles.button}
            >
              {primaryButton.forceReload ? (
                <a
                  href={primaryButton.href}
                  target={primaryButton.openInNewTab ? "_blank" : undefined}
                  onClick={onPrimaryButtonClick}
                >
                  {primaryButton.title}
                  {primaryButton.materialIcon}
                </a>
              ) : (
                <Link
                  href={primaryButton.href}
                  target={primaryButton.openInNewTab ? "_blank" : undefined}
                  onClick={onPrimaryButtonClick}
                  scroll={primaryButton.scrollOnClick ?? true}
                >
                  {primaryButton.title}
                  {primaryButton.materialIcon}
                </Link>
              )}
            </Button>
          ) : null}
          {secondaryButton ? (
            <Button
              asChild
              theme={buttonTheme}
              size="small"
              className={styles.button}
              intent="secondary"
              disabled
            >
              <Link
                href={secondaryButton.href}
                target={secondaryButton.openInNewTab ? "_blank" : undefined}
                onClick={onSecondaryButtonClick}
                scroll={secondaryButton.scrollOnClick ?? true}
              >
                {secondaryButton.title}
                {secondaryButton.materialIcon}
              </Link>
            </Button>
          ) : null}
        </div>
      </div>
    </article>
  )
}