Proyectos de Subversion LeadersLinked - SPA

import React from 'react'
import { useSelector } from 'react-redux'
import { Link } from 'react-router-dom'
import { Typography } from '@mui/material'

import { useMicroLearning, useFetch } from '@hooks'

import { TopicContainer, TopicsGrid } from './UI'
import Spinner from '@components/UI/Spinner'
import EmptySection from '@components/UI/EmptySection'

const Companies = () => {
  const { link_companies: linkCompanies } = useMicroLearning()
  const { data: companies, isLoading } = useFetch(linkCompanies, [])
  const labels = useSelector(({ intl }) => intl.labels)

  if (isLoading) {
    return <Spinner />
  }

  return (
    <TopicsGrid>
      {companies.length ? (
        companies.map((company) => (
          <Company key={company.uuid} company={company} />
        ))
      ) : (
        <EmptySection message={labels.datatable_szerorecords} />
      )}
    </TopicsGrid>
  )
}

const Company = ({ company }) => {
  const { name, image, uuid } = company

  return (
    <Link to={uuid}>
      <TopicContainer>
        <div className='c-header'>
          <Typography variant='h3'>{name}</Typography>
        </div>
        <div className='c-body'>
          <img src={image} alt='' />
        </div>
      </TopicContainer>
    </Link>
  )
}

export default Companies