import { useMemo } from "react";

export default function Title({
  title,
  titleColor,
}: {
  title: string;
  titleColor: string;
}) {
  const isLevel = useMemo(
    () =>
      [
        "level0",
        "level1",
        "level2",
        "level3",
        "level4",
        "level5",
        "titleLV2000",
      ].includes(titleColor),
    [titleColor],
  );

  return (
    <span
      className={isLevel ? titleColor : undefined}
      style={isLevel ? undefined : { color: titleColor }}
    >
      {title}
    </span>
  );
}