import type { ActionGroupView } from '../state/viewModel';
import { ActionGroup } from './ActionGroup';

interface ActionColumnProps {
  label: string;
  groups: ActionGroupView[];
  actionKind: string;
}

export function ActionColumn({ label, groups, actionKind }: ActionColumnProps) {
  return (
    <div className="w-80 min-w-80 shrink-0 flex flex-col gap-4 bg-slate-900/40 rounded-xl p-4 border border-slate-800/60">
      <h2 className="font-bold text-slate-200 text-sm uppercase tracking-widest border-b border-slate-800 pb-2 select-none">
        {label}
      </h2>
      <div className="flex flex-col gap-3">
        {groups.map((group) => (
          <ActionGroup key={group.id} group={group} actionKind={actionKind} />
        ))}
      </div>
    </div>
  );
}