import { Ban, Fingerprint, Globe2, Plus, ShieldCheck } from 'lucide-react';

import { Button } from '@/components/ui/button';
import type { WAFRuleNode } from '@/lib/services/openflare';

type AddableType = Extract<
  WAFRuleNode['type'],
  'ip_match' | 'geo_match' | 'pow' | 'block'
>;
const items = [
  { type: 'ip_match', label: 'IP 匹配', icon: Fingerprint },
  { type: 'geo_match', label: '地域匹配', icon: Globe2 },
  { type: 'pow', label: 'PoW 挑战', icon: ShieldCheck },
  { type: 'block', label: '阻止', icon: Ban },
] satisfies { type: AddableType; label: string; icon: typeof Plus }[];

export function NodeLibrary({ onAdd }: { onAdd: (type: AddableType) => void }) {
  return (
    <div className='flex items-center gap-2'>
      {items.map(({ type, label, icon: Icon }) => (
        <Button
          key={type}
          variant='outline'
          size='sm'
          onClick={() => onAdd(type)}
        >
          <Icon data-icon='inline-start' />
          {label}
        </Button>
      ))}
    </div>
  );
}