import { content } from '../content';
import { gameRuntime } from '../state/runtime';
import { useGameStore } from '../state/store';

/** Action list — a start button per action, with a progress bar on the active one. */
export function ActionPanel() {
  const activeActionId = useGameStore((state) => state.activeActionId);
  const actionProgress = useGameStore((state) => state.actionProgress);

  return (
    <section aria-label="Actions" className="flex flex-col gap-2">
      <h2 className="font-medium text-slate-300 text-sm uppercase tracking-wide">Actions</h2>
      {content.actions.map((action) => {
        const isActive = action.id === activeActionId;
        return (
          <button
            type="button"
            key={action.id}
            onClick={() => gameRuntime.startAction(action.id)}
            className="relative overflow-hidden rounded-lg border border-slate-700 bg-slate-800/70 px-4 py-3 text-left transition-colors hover:border-amber-500/60 hover:bg-slate-800"
          >
            {isActive ? (
              <div
                className="absolute inset-y-0 left-0 bg-amber-500/15"
                style={{ width: `${Math.round(actionProgress * 100)}%` }}
                aria-hidden="true"
              />
            ) : null}
            <div className="relative flex items-center justify-between">
              <span className="font-medium text-slate-100">{action.name}</span>
              <span className="text-slate-400 text-xs">{isActive ? 'running…' : 'start'}</span>
            </div>
          </button>
        );
      })}
    </section>
  );
}