import { ReactFlow, Controls, MiniMap, Background } from '@xyflow/react';

export default function FlowGraph({ nodes, edges, nodeTypes, onNodeClick, fitView = true, className = '' }) {
  return (
    <div className={`w-full h-full ${className}`} style={{ minHeight: '500px' }}>
      <ReactFlow
        nodes={nodes} edges={edges} nodeTypes={nodeTypes} onNodeClick={onNodeClick}
        fitView={fitView} proOptions={{ hideAttribution: true }}
        defaultEdgeOptions={{ type: 'smoothstep', animated: false, style: { stroke: '#475569', strokeWidth: 1.5 } }}
      >
        <Background color="#1e293b" gap={20} />
        <Controls position="bottom-right" />
        <MiniMap nodeColor={(node) => node.data?.color || '#475569'} maskColor="rgba(0, 0, 0, 0.7)" position="bottom-left" />
      </ReactFlow>
    </div>
  );
}