"use client"

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

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

type BenefitCardProps = {
  Icon: React.ComponentType<{
    width?: number
    height?: number
    className?: string
  }>
  title: string
  description: string
}

export default function BenefitCard({
  Icon,
  title,
  description,
}: BenefitCardProps) {
  return (
    <div className={styles.card}>
      <div className={styles.iconPane} aria-hidden="true">
        <Icon width={140} height={120} />
      </div>
      <div className={styles.copy}>
        <Typography variant="Title/Subtitle/md">
          <h3>{title}</h3>
        </Typography>
        <Typography variant="Body/Supporting text (caption)/smRegular">
          <p>{description}</p>
        </Typography>
      </div>
    </div>
  )
}