import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Title from "@/components/TempDesignSystem/Text/Title"

import { cardVariants } from "./variants"

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

import type { ButtonProps } from "@/components/TempDesignSystem/Button/button"
import type { CardProps } from "./card"

export default function Card({
  primaryButton,
  secondaryButton,
  scriptedTopTitle,
  heading,
  bodyText,
  className,
  theme,
}: CardProps) {
  let buttonTheme: ButtonProps["theme"] = "primaryLight"

  switch (theme) {
    case "one":
      buttonTheme = "primaryLight"
      break
    case "two":
      buttonTheme = "secondaryLight"
      break
    case "three":
      buttonTheme = "tertiaryLight"
      break
  }

  return (
    <article
      className={cardVariants({
        className,
        theme,
      })}
    >
      {scriptedTopTitle ? (
        <section className={styles.scriptContainer}>
          <Title className={styles.scriptedTitle} level="h3">
            {scriptedTopTitle}
          </Title>
          <Divider className={styles.divider} />
        </section>
      ) : null}
      <Title as="h5" className={styles.heading} level="h3">
        {heading}
      </Title>
      {bodyText ? <p className={styles.bodyText}>{bodyText}</p> : null}
      <div className={styles.buttonContainer}>
        {primaryButton ? (
          <Button asChild theme={buttonTheme} size="small">
            <Link
              href={primaryButton.href}
              target={primaryButton.openInNewTab ? "_blank" : undefined}
            >
              {primaryButton.title}
            </Link>
          </Button>
        ) : null}
        {secondaryButton ? (
          <Button
            asChild
            theme={buttonTheme}
            size="small"
            intent="secondary"
            disabled
          >
            <Link
              href={secondaryButton.href}
              target={secondaryButton.openInNewTab ? "_blank" : undefined}
            >
              {secondaryButton.title}
            </Link>
          </Button>
        ) : null}
      </div>
    </article>
  )
}