import React from 'react';

interface Props { onClose: () => void }
const shortcuts = [
  ['Space', '재생 / 일시정지'],
  ['← / →', '5초 뒤로 / 앞으로'],
  ['J / L', '10초 뒤로 / 앞으로'],
  [', / .', '이전 / 다음 프레임 (일시정지 시)'],
  ['[ / ]', '이전 / 다음 장면 (±30초)'],
  ['0 ~ 9', '10% 단위 탐색'],
  ['F', '전체화면 토글'],
  ['M', '음소거 토글'],
  ['+ / -', '재생 속도 증가 / 감소'],
  ['Shift+S', '현재 프레임 캡처'],
  ['Shift+M', '현재 시점에 메모 추가'],
  ['?', '이 도움말 열기 / 닫기'],
];
export default function HelpOverlay({ onClose }: Props) {
  return (
    <div className="fixed inset-0 bg-black/70 flex items-center justify-center z-50" onClick={onClose}>
      <div className="bg-gray-900 rounded-lg p-6 w-96 shadow-xl" onClick={e => e.stopPropagation()}>
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-lg font-semibold">키보드 단축키</h2>
          <button onClick={onClose} className="text-gray-400 hover:text-white text-xl">×</button>
        </div>
        <table className="w-full text-sm">
          <tbody className="divide-y divide-gray-800">
            {shortcuts.map(([key, desc]) => (
              <tr key={key} className="py-1">
                <td className="py-1.5 pr-4 font-mono text-yellow-400 whitespace-nowrap">{key}</td>
                <td className="py-1.5 text-gray-300">{desc}</td>
              </tr>
            ))}
          </tbody>
        </table>
        <p className="text-xs text-gray-500 mt-4 text-center">아무 곳이나 클릭하면 닫힙니다</p>
      </div>
    </div>
  );
}
