import { h } from 'preact'
import { useEffect, useRef, useState } from 'preact/hooks'

import { H1, H2, P } from '../Text'
import {
  Wrapper,
  PositionedLogo as Logo,
  TaglineContainer,
  Top,
} from './styles'
import translations from '../../data/strings'
import InfoLayout from '../InfoLayout'

const allowedChannels = [7, 4] // ReclaimFutures, NDC

const Info = ({ data }) => {
  // const [feed, setFeed] = useState([])

  // useEffect(() => {
  //   setFeed(sortData(data))
  // }, [data])

  useEffect(() => {
    console.log({ data })
  }, [data])

  return (
    <InfoLayout title={translations.en.noStreams}>
      <P>ding dong</P>
    </InfoLayout>
  )
}

const sortData = data => {
  // if (!data || data?.length === 0) return
  // console.log('data', data)
  // return data.filter(feedItem => {
  //   return allowedChannels.includes(feedItem.channel.id) && feedItem.isLive
  // })
}

export default Info