import NextLink from "next/link"

import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"

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

type PromoProps = {
  buttonText: string
  href: string
  text: string
  title: string
  image?: {
    src: string
    altText: string
    altText_En: string
  }
}

export default function Promo({
  buttonText,
  href,
  text,
  title,
  image,
}: PromoProps) {
  return (
    <NextLink className={styles.promo} href={href}>
      {image && (
        <div className={styles.imageContainer}>
          <Image
            className={styles.image}
            src={image.src}
            alt={image.altText || image.altText_En}
            fill
          />
        </div>
      )}
      <div className={styles.overlay} />
      <div className={styles.content}>
        <Typography variant="Title/smLowCase">
          <p>{title}</p>
        </Typography>
        <Typography variant="Body/Paragraph/mdRegular">
          <p className={styles.text}>{text}</p>
        </Typography>
        <FakeButton variant="Secondary" color="Inverted" size="sm">
          {buttonText}
        </FakeButton>
      </div>
    </NextLink>
  )
}