import { Checkbox } from 'antd';
import { memo } from 'react';

interface PermListProps {
  perms: API.PermItem[];
  checkedIds: Set<number>;
  onToggle?: (p: API.PermItem) => void;
  mode: 'view' | 'edit';
}

export const PermList = memo(({ perms, checkedIds, onToggle, mode }: PermListProps) => {
  if (perms.length === 0) return null;
  return (
    <div className="flex flex-col gap-1">
      {perms.map((p) => (
        <label key={p.id} className="flex items-center gap-2 cursor-pointer py-0.5">
          {mode === 'edit' && (
            <Checkbox checked={checkedIds.has(p.id)} onChange={() => onToggle?.(p)} />
          )}
          <span className="text-xs font-mono text-(--ant-color-primary)">{p.code}</span>
          <span className="text-xs text-(--ant-color-text-tertiary)">{p.name}</span>
        </label>
      ))}
    </div>
  );
});