import React from "react";

import { Icon } from "../icon/Icon";
import type { TooltipProps } from "./Tooltip";

export const Title = ({
  tooltip,
  shortcutText,
  shortcutIcons,
  secondaryTooltip,
  tertiaryTooltip,
}: Pick<
  TooltipProps,
  | "tooltip"
  | "shortcutText"
  | "shortcutIcons"
  | "secondaryTooltip"
  | "tertiaryTooltip"
>) => {
  return (
    <>
      <div className="text-style-M100 flex items-center text-N0 only:text-center">
        {tooltip}
        {(shortcutText ?? shortcutIcons) && (
          <span className="ml-4 flex items-center rounded-4 bg-N500 px-[3px] py-2 text-center text-50 leading-75">
            {(shortcutIcons ?? []).map((iconName, index) => (
              <span
                className="flex h-10 w-10 items-center justify-center"
                key={index}
              >
                <Icon
                  name={iconName}
                  weight="bold"
                  color="white"
                  size="12"
                  ESCAPE_className="shrink-0"
                />
              </span>
            ))}
            {(Array.isArray(shortcutText)
              ? shortcutText
              : [...(shortcutText ?? "")]
            ).map((hotkey, index) =>
              hotkey.length > 1 ? (
                hotkey
              ) : (
                <span className="w-8" key={index}>
                  {hotkey}
                </span>
              )
            )}
          </span>
        )}
      </div>
      {secondaryTooltip && (
        <div className="text-style-R100 text-N0">{secondaryTooltip}</div>
      )}
      {tertiaryTooltip && (
        <div className="text-style-M100 mt-2 text-N70">{tertiaryTooltip}</div>
      )}
    </>
  );
};
