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"

import type { PromoProps } from "../../../../types/components/promo/promoProps"

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>
  )
}