import map from 'lodash/map'

import type { Match } from 'features/Matches'
import { MatchCard } from 'features/MatchCard'

import { Wrapper } from './styled'

type MatchesGridProps = {
  matches: Array<Match>,
}

export const MatchesGrid = ({ matches }: MatchesGridProps) => (
  <Wrapper>
    {map(matches, (match) => <MatchCard key={match.id} match={match} />)}
  </Wrapper>
)
