web/apps/scandic-web/components/HotelReservation/MyStay/BookingSummary/SummaryCard/index.tsx

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

import Image from "@/components/Image"

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

interface SummaryCardProps {
  title: React.ReactNode
  image: {
    src: string
    alt: string
  }
  texts: string[]
  supportingText?: string
  links?: {
    href: string
    text: string
    icon: React.ReactNode
    onClick?: () => void
  }[]
  chip?: React.ReactNode
}

export default function SummaryCard({
  title,
  texts,
  image,
  supportingText,
  links,
  chip,
}: SummaryCardProps) {
  return (
    <div className={styles.card}>
      <div className={styles.image}>
        <Image src={image.src} alt={image.alt} width={152} height={152} />
      </div>
      <div className={styles.content}>
        <div>
          {title}
          {texts.map((text) => (
            <Typography variant="Body/Paragraph/mdRegular" key={text}>
              <p>{text}</p>
            </Typography>
          ))}
        </div>
        {supportingText && (
          <Typography variant="Body/Supporting text (caption)/smRegular">
            <p className={styles.supportingText}>{supportingText}</p>
          </Typography>
        )}
        <div className={styles.bottomContent}>
          {chip}
          {links && (
            <div className={styles.links}>
              {links.map((link) => (
                <Typography
                  variant="Body/Supporting text (caption)/smBold"
                  key={link.href}
                >
                  <Link
                    href={link.href}
                    target="_blank"
                    className={styles.link}
                    onClick={link.onClick}
                  >
                    {link.icon}
                    {link.text}
                  </Link>
                </Typography>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}