import Image from "@/components/Image"
import Link from "@/components/TempDesignSystem/Link"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"

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

interface SummaryCardProps {
  title: string
  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 className={styles.topContent}>
          <Body textTransform="bold" color="uiTextHighContrast">
            {title}
          </Body>
          {texts.map((text) => (
            <Body color="uiTextHighContrast" key={text}>
              {text}
            </Body>
          ))}
        </div>
        {supportingText && (
          <Caption color="uiTextPlaceholder">{supportingText}</Caption>
        )}
        <div className={styles.bottomContent}>
          {chip}
          {links && (
            <div className={styles.links}>
              {links.map((link) => (
                <Caption asChild type="bold" color="burgundy" key={link.href}>
                  <Link
                    href={link.href}
                    target="_blank"
                    color="burgundy"
                    className={styles.link}
                    onClick={link.onClick}
                  >
                    {link.icon}
                    {link.text}
                  </Link>
                </Caption>
              ))}
            </div>
          )}
        </div>
      </div>
    </div>
  )
}
