import { FC, HTMLAttributes } from "react";

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

interface MaxCharactersMessageTextProps extends HTMLAttributes<HTMLDivElement> {
  includeTitle?: boolean;
  useLinks?: boolean;
  useMyCharactersLink?: boolean;
  hasLockedCharacters?: boolean;
}

export const MaxCharactersMessageText: FC<MaxCharactersMessageTextProps> = ({
  includeTitle,
  useLinks,
  useMyCharactersLink,
  hasLockedCharacters,
  ...props
}) => {
  const subscribe = useLinks ? (
    <a className={styles.link} href="/store/subscribe">
      Subscribe
    </a>
  ) : (
    "Subscribe"
  );

  const myCharacters =
    useMyCharactersLink || useLinks ? (
      <a className={styles.link} href="/characters">
        My Characters
      </a>
    ) : (
      "My Characters"
    );

  if (hasLockedCharacters) {
    return (
      <div {...props}>
        <p className={styles.messageSubtext}>
          Your character slots are full. To create a new character, select which
          characters to keep using the options below, or{" "}
          <a className={styles.link} href="/store/subscribe">
            subscribe
          </a>{" "}
          to unlock additional slots.
        </p>
      </div>
    );
  }

  return (
    <div {...props}>
      {includeTitle && (
        <p className={styles.messageTitle}>
          Oops! Your character slots are full.
        </p>
      )}
      <p className={styles.messageSubtext}>
        You&apos;re quite the adventurer! {subscribe} to unlock additional
        slots, or return to {myCharacters} and delete a character to make room.
      </p>
    </div>
  );
};