spa_instat_tv/src/pages/HighlightsPage/components/MatchesHighlights/index.tsx

import { T9n } from 'features/T9n'
import { Checkbox } from 'features/Common/Checkbox'
import { ArrowLoader } from 'features/ArrowLoader'
import { SportIcon } from 'features/SportIcon'

import { useHighlighMatches } from './hooks'

import {
  ScTitle,
  ScMatchesWrapper,
  ScMatchesList,
  ScLabel,
  ScDate,
  ScTournament,
  ScTournamentName,
  ScCountryFlag,
  ScFakeDate,
  ScFakeTournamentName,
  ScFakeTournament,
  ScFakeCheckbox,
  ScFakeWrapper,
  ScLoaderWrapper,
} from './styled'

export const MatchesHighlights = ({ matches }: any) => {
  const { onChangeSelectedMatches, playerMatches } = useHighlighMatches()

  return (
    <ScMatchesWrapper>
      <ScTitle>
        <T9n t='matches_highlight' />
      </ScTitle>
      <ScMatchesList>
        {playerMatches.length ? (playerMatches?.map(({
          country_id,
          date,
          id,
          isChecked,
          sport,
          team1,
          team2,
          tournament,
        }: any) => (
          <Checkbox
            key={id}
            id={id}
            checked={isChecked}
            onChange={onChangeSelectedMatches}
            label={(
              <ScLabel>
                <ScDate>
                  {date}
                </ScDate>&nbsp;
                {team1.name_eng} - {team2.name_eng}
                <ScTournament>
                  <SportIcon sport={sport} />
                  <ScCountryFlag
                    src={`https://instatscout.com/images/flags/48/${country_id}.png`}
                  />
                  <ScTournamentName>{tournament.name_eng}</ScTournamentName>
                </ScTournament>
              </ScLabel>
            )}
          />
        ))) : (Array.from(Array(12)).map(() => (
          <ScFakeWrapper>
            <ScFakeCheckbox />
            <ScFakeTournament>
              <ScFakeDate />
              <ScFakeTournamentName />
            </ScFakeTournament>
          </ScFakeWrapper>
        )))}
        {/* <ScLoaderWrapper>
          <ArrowLoader />
        </ScLoaderWrapper> */}
      </ScMatchesList>
    </ScMatchesWrapper>
  )
}