import {Row, Col} from 'antd'

import Documents from '../Documents/DocumentsTemplate'

import '@styles/equipment_details.css'

export default function EquipmentDetails({ id, equipmentTimers, equipmentSensors }) {
  let stateOfEquipmentDetails = equipmentTimers.map(timer => {
    return(
      <p key={timer.label}>{timer.label}: <span className="right-text"><b>{timer.value} {timer.unit}</b></span></p>
    )
  })

  let indicatorsOfEquipmentDetail = equipmentSensors.map(sensor => {
    return(
      <p key={sensor.label}>{sensor.label}: <span className="right-text"><b>{sensor.value} {sensor.unit}</b></span></p>
    )
  })

  return (<>
    <Row Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
      <Col span={12}>
        Тест 1
      </Col>
      <Col span={12}>
        {stateOfEquipmentDetails}
      </Col>
    </Row>
    <br/>
    <Row Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }} align="middle">
      <Col span={12}>
        <Documents idWell={id}/>
      </Col>
      <Col span={12}>
        {indicatorsOfEquipmentDetail}
      </Col>
    </Row>
  </>)
}