import React from 'react'
import './ImportList.css'
import Import from './Import/Import'
import Text from '../../../components/UI/Text/Text';

export default ({imports_array}) => {
  let key = 0;
  return (
    <div>
      <div className={'ImportListHeader'}>
        <Text type={'Heading1'} text={'Directory'} style={{minWidth: '33.33%', maxWidth: '33.33%'}}/>
        <Text type={'Heading1'} text={'Skylink'} style={{minWidth: '33.33%', maxWidth: '33.33%'}}/>
        <Text type={'Heading1'} text={'Token'} style={{minWidth: '33.33%', maxWidth: '33.33%'}}/>
      </div>
      <hr/>
      <div className={'ImportListOwner'}>
        {
          imports_array.map(data => {
            return (
              <div key={'import_' + key++}>
                <Import data={data}/>
              </div>
            );
          })
        }
      </div>
    </div>
  );
};
