import React from 'react'
import { Table } from 'antd'
import { LoadingOutlined } from '@ant-design/icons'

import IdDisplay from './IdDisplay'
import PartIcon from '../../Icons/PartIcon'
import PropTypes from 'prop-types'

const PartsTable = ({ data = [], loading = false, showHeader = false }) => {
  const columns = [
    {
      title: '',
      dataIndex: '',
      key: '',
      width: 40,
      fixed: 'left',
      render: () => <PartIcon />
    },
    {
      title: 'Name',
      dataIndex: 'name',
      key: 'name',
      width: 200,
      fixed: 'left'
    },
    {
      title: 'ID',
      dataIndex: '_id',
      key: 'id',
      width: 180,
      render: (text) => (
        <IdDisplay id={text} type={'part'} showHyperlink={true} />
      )
    }
  ]

  return (
    <Table
      dataSource={data}
      columns={columns}
      pagination={false}
      rowKey='_id'
      showHeader={showHeader}
      loading={{ spinning: loading, indicator: <LoadingOutlined spin /> }}
    />
  )
}

PartsTable.propTypes = {
  data: PropTypes.array,
  loading: PropTypes.bool,
  showHeader: PropTypes.bool
}
export default PartsTable