import type { AdType } from 'requests'

import {
  HeaderWrapAd,
} from './styled'

import { AdComponent } from './components/AdComponent'
import { AdsPropsType } from './types'
import { MobileAd } from './components/MobileAd'
import { isMobileDevice } from '../../config'

export const HeaderAds = ({ ads }: AdsPropsType) => (
  ads?.length ? (
    <HeaderWrapAd column={ads?.length}>
      {ads.map((ad: AdType) => (
        !isMobileDevice ? (
          <AdComponent
            ad={ad}
            key={ad.id}
          />
        ) : (
          <MobileAd
            ad={ad}
            key={ad.id}
          />
        )
      ))}
    </HeaderWrapAd>
  ) : null
)