import classNames from "classnames";
import type { ReactNode } from "react";
import { Fragment } from "react";
import type { HotkeyAction } from "../../hooks/useHotKey";
import { Hotkey } from "./Hotkey";
import { HotkeyLabel } from "./HotkeyLabel";

interface Props {
  hotkeys: HotkeyAction[];
  bottomSlot?: ReactNode;
  className?: string;
}

export const HotkeyList = ({ hotkeys, bottomSlot, className }: Props) => {
  return (
    <div className={classNames(className, "h-full flex items-center justify-center")}>
      <div className="grid gap-2 grid-cols-[auto_auto]">
        {hotkeys.map((hotkey) => (
          <Fragment key={hotkey}>
            <HotkeyLabel className="truncate" action={hotkey} />
            <Hotkey className="ml-4" action={hotkey} />
          </Fragment>
        ))}
        {bottomSlot}
      </div>
    </div>
  );
};