import Image from "@/components/Image"
import Card from "@/components/TempDesignSystem/Card"

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

import type { InfoCardProps } from "@/types/components/blocks/infoCard"

export default function InfoCard({
  scriptedTopTitle,
  heading,
  bodyText,
  image,
  primaryButton,
  secondaryButton,
  theme = "one",
  imagePosition = "right",
}: InfoCardProps) {
  return (
    <article className={styles.container}>
      {image ? (
        <div
          className={`${styles.imageContainer} ${styles[`image-${imagePosition}`]}`}
        >
          <Image
            src={image.url}
            alt={image.title}
            sizes="(min-width: 768px) 724px, 358px"
            width={358}
            height={179}
            focalPoint={image.focalPoint}
            className={styles.image}
          />
        </div>
      ) : null}
      <Card
        scriptedTopTitle={scriptedTopTitle}
        heading={heading}
        bodyText={bodyText}
        primaryButton={primaryButton}
        secondaryButton={secondaryButton}
        className={styles.card}
        theme={theme}
      />
    </article>
  )
}
