import * as React from 'react'
import { createRoot } from 'react-dom/client'

import { createCircularLayout } from '@graphora/layouts'
import { Graph } from '@graphora/react'

import './style.css'

const graph = {
  nodes: [
    { id: 'gateway', label: 'Gateway' },
    { id: 'orders', label: 'Orders' },
    { id: 'database', label: 'Database' }
  ],
  edges: [
    {
      id: 'gateway-orders',
      source: 'gateway',
      target: 'orders',
      directed: true
    },
    {
      id: 'orders-database',
      source: 'orders',
      target: 'database',
      directed: true
    }
  ]
}

const layout = createCircularLayout({ radius: 120 })
const theme = {
  backgroundColor: '#f8fafc',
  node: { fill: '#2563eb', radius: 22 },
  edge: { stroke: '#64748b', strokeWidth: 2, arrow: { end: true } },
  label: { visible: true, fill: '#0f172a', fontSize: 13 }
}

function App(): React.ReactElement {
  return (
    <Graph
      graph={graph}
      layout={layout}
      fitToViewOnLayout={{ padding: 48 }}
      ariaLabel="Service dependency graph"
      className="graph-surface"
      theme={theme}
    />
  )
}

createRoot(document.querySelector('#root') as HTMLElement).render(<App />)