import Gallery from './Gallery'
import Port from './Port'
import Connection from './Connection'
import InterfaceOption from './InterfaceOption'

const Interface = props => {
  const { workerScript, interfaceName, options, ports, connections } = props.data
  return (
    <div>
      <h2>{interfaceName}</h2>
      <p>Script:</p><p>{workerScript}</p>
      <Gallery title='ports' items={ports.map(port => <Port key={port.device} data={port} />)} />
      <Gallery title='connections' items={connections.map(connection => <Connection key={connection.id} data={connection} />)} />
      <Gallery title='options' items={options.map(option => <InterfaceOption key={option.name} data={option} />)} />
    </div>
  )
}

export default Interface