import { Fragment } from 'react'

import isEmpty from 'lodash/isEmpty'

import type { Match } from 'features/Matches/hooks'
import { MatchesSlider } from 'features/MatchesSlider'
import { MatchesGrid } from 'features/MatchesGrid'
import { TournamentList } from 'features/TournamentList'
import { T9n } from 'features/T9n'

import { Title, Section } from '../../styled'

const matchesComponents = {
  grid: MatchesGrid,
  slider: MatchesSlider,
  tournaments: TournamentList,
}

type Props = {
  as: keyof typeof matchesComponents,
  matches: Array<Match>,
  title?: string,
}

export const MatchesList = ({
  as,
  matches,
  title,
}: Props) => {
  const Component = matchesComponents[as]
  return (
    <Fragment>
      {!isEmpty(matches) && (
        <Section>
          {title && (
            <Title>
              <T9n t={title} />
            </Title>
          )}
          <Component
            matches={matches}
          />
        </Section>
      )}
    </Fragment>
  )
}
