import * as React from "react"
import * as styles from "./CardWithTextMask.module.scss"

export interface IProps {
  title: React.ReactNode
  description?: React.ReactNode
  imageUrl: string
}

export default function CardWithTextMask({ title, description, imageUrl }: IProps) {
  return (
    <div className={styles.container} style={{ backgroundImage: `url(${imageUrl})` }}>
      <div className={styles.title}>
        {title}
      </div>
      {description && (
        <div className={styles.description}>
          {description}
        </div>
      )}
    </div>
  )
}