/** Which finger types the key that is wanted right now, said in words.
 *
 * The keyboard shows *where*; this shows *which finger*, because at six the failure mode
 * is not finding the key, it is finding it with the wrong finger and building the habit
 * that the whole exercise exists to prevent.
 *
 * When the target is a capital it also names the Shift hand - the opposite one, which is
 * the single rule that separates touch typing from a pinky cramp. */

import { fingerOf, needsShift, shiftHandFor } from "../lib/fingers";

interface Props {
  nextKey: string | null;
}

export function HandHint({ nextKey }: Props) {
  if (!nextKey) return null;

  const finger = fingerOf(nextKey);
  if (!finger) return null;

  const shiftHand = needsShift(nextKey) ? shiftHandFor(nextKey) : null;

  return (
    <div
      style={{
        display: "flex",
        alignItems: "center",
        justifyContent: "center",
        gap: 10,
        color: "var(--paper)",
        fontWeight: 800,
        fontSize: 17,
        opacity: 0.92,
        minHeight: 30,
      }}
    >
      <span
        style={{
          width: 16,
          height: 16,
          borderRadius: 999,
          flex: "none",
          background: `oklch(72% 0.15 ${finger.hue})`,
          boxShadow: `0 0 12px oklch(72% 0.15 ${finger.hue} / .7)`,
        }}
      />
      <span>{finger.label}</span>
      {shiftHand && (
        <span style={{ opacity: 0.85 }}>+ Umschalttaste {shiftHand}</span>
      )}
    </div>
  );
}