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

import { DeathCauseEnum, DefaultCharacterName } from "~/constants";
import { useCharacterEngine } from "~/hooks/useCharacterEngine";

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

export interface CharacterNameProps extends HTMLAttributes<HTMLDivElement> {}

export const CharacterName: FC<CharacterNameProps> = ({
  className,
  ...props
}) => {
  const { deathCause, characterName } = useCharacterEngine();

  return (
    <h1 className={clsx([styles.characterName, className])} {...props}>
      {deathCause !== DeathCauseEnum.NONE && "(Dead) "}
      {characterName || DefaultCharacterName}
    </h1>
  );
};