import { Button } from "@scandic-hotels/design-system/Button"
import Link from "@scandic-hotels/design-system/Link"
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 function Promo({ buttonText, href, text, title }: PromoProps) {
  return (
    <Link className={styles.link} color="none" href={href}>
      <article className={styles.promo}>
        <Typography variant={"Title/smLowCase"}>
          <h4>{title}</h4>
        </Typography>
        <Typography variant={"Body/Paragraph/mdRegular"}>
          <p className={styles.text}>{text}</p>
        </Typography>
        <Button size="Small" variant={"Secondary"} color={"Inverted"} wrapping>
          <div>{buttonText}</div>
        </Button>
      </article>
    </Link>
  )
}