import Title from "@/components/Title"

import Button from "../Button"
import { ButtonProps } from "../Button/button"
import Divider from "../Divider"
import Link from "../Link"
import { CardProps } from "./card"
import { cardVariants } from "./variants"

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

export default function Card({
  primaryButton,
  secondaryButton,
  scriptedTopTitle,
  heading,
  bodyText,
  backgroundImage,
  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 level="h3" weight="semiBold" className={styles.scriptedTitle}>
            {scriptedTopTitle}
          </Title>
          <Divider className={styles.divider} />
        </section>
      ) : null}
      {heading ? (
        <Title
          level="h3"
          as="h5"
          weight="semiBold"
          uppercase
          className={styles.heading}
        >
          {heading}
        </Title>
      ) : null}
      {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>
  )
}