import { cva } from "class-variance-authority"

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

import { BlockListItemsEnum, type ListItem } from "@/types/requests/blocks/list"

const config = {
  variants: {
    type: {
      default: styles.disc,
      checkmark: styles.checkmark,
    },
  },
  defaultVariants: {
    type: "default",
  },
} as const

const listItemStyle = cva(styles.listItem, config)

export default function ListItem({ listItem }: { listItem: ListItem }) {
  const typeName = listItem.__typename

  switch (typeName) {
    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItem:
      return (
        <li
          className={listItemStyle({
            type: listItem.list_item.list_item_style,
          })}
        >
          {listItem.list_item.subtitle ? (
            <>
              <strong>{listItem.list_item.title}</strong>
              <br />
              <span>{listItem.list_item.subtitle}</span>
            </>
          ) : (
            listItem.list_item.title
          )}
        </li>
      )
    case BlockListItemsEnum.CurrentBlocksPageBlocksListBlockListItemsListItemExternalLink:
      return (
        <li
          className={listItemStyle({
            type: listItem.list_item_external_link.list_item_style,
          })}
        >
          <a
            className={styles.link}
            href={listItem.list_item_external_link.link.href}
          >
            <strong>{listItem.list_item_external_link.link.title}</strong>
          </a>
          {listItem.list_item_external_link.subtitle && (
            <span>
              <br />
              {listItem.list_item_external_link.subtitle}
            </span>
          )}
        </li>
      )

    default:
      return null
  }
}