import Image from "@scandic-hotels/design-system/Image"
import Link from "@scandic-hotels/design-system/Link"
import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
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 (
    <Link color="none" href={href}>
      <article className={styles.promo}>
        {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>
          <Button asChild intent="secondary" size="small" theme="primaryStrong">
            <span>{buttonText}</span>
          </Button>
        </div>
      </article>
    </Link>
  )
}