text: import React from 'react'
  import { CCard, CCardBody, CCardHeader, CCol, CRow } from '@coreui/react'
  import CIcon from '@coreui/icons-react'
  
  import usersData from './TrainerData'
  
  const User = ({match}) => {
    const user = usersData.find( user => user.slno.toString() === match.params.slno)
    const userDetails = user ? Object.entries(user) : 
      [['slno', (<span><CIcon className="text-muted" name="cui-icon-ban" /> Not found</span>)]]
  
    return (
      <CRow>
        <CCol lg={6}>
          <CCard>
            <CCardHeader>
              User slno: {match.params.slno}
            </CCardHeader>
            <CCardBody>
                <table className="table table-striped table-hover">
                  <tbody>
                    {
                      userDetails.map(([key, value], index) => {
                        return (
                          <tr key={index.toString()}>
                            <td>{`${key}:`}</td>
                            <td><strong>{value}</strong></td>
                          </tr>
                        )
                      })
                    }
                  </tbody>
                </table>
            </CCardBody>
          </CCard>
        </CCol>
      </CRow>
    )
  }
  
  export default User
  