import { clsx } from "clsx";
import { FC, HTMLAttributes } from "react";

import { FormatUtils } from "@dndbeyond/character-rules-engine/es";

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

interface Props extends HTMLAttributes<HTMLDivElement> {
  sourceName?: string | null;
  sourceNames?: Array<string>;
  url?: string;
  description?: string | null;
  className?: string;
}
export const MarketplaceCta: FC<Props> = ({
  sourceName = null,
  sourceNames,
  url = "/marketplace",
  description = null,
  className,
  ...props
}) => {
  const allSourceNames: Array<string> = [];

  if (sourceName) {
    allSourceNames.push(sourceName);
  }

  if (sourceNames) {
    allSourceNames.push(...sourceNames);
  }

  return (
    <div className={clsx([styles.cta, className])} {...props}>
      <a href={url} target="_blank" className={styles.link} rel="noreferrer">
        <div className={styles.content}>
          {allSourceNames.length > 0 && (
            <div className={styles.header}>
              <div className={styles.headerIntro}>Available in</div>
              <div className={styles.headerTitle}>
                {FormatUtils.renderNonOxfordCommaList(allSourceNames)}
              </div>
            </div>
          )}
          {description && (
            <div className={styles.description}>{description}</div>
          )}
          <div className={styles.button}>Go To Marketplace</div>
        </div>
      </a>
    </div>
  );
};