import { useDown, vui } from '../core'
import { FooterColumnsProps } from './footer.types'
import FooterColumn from './footerColumn'
import FooterRow from './footerRow'

/** Organizes sections with links into a single column. Different width per breakpoint. */
const FooterColumns = vui<'div', FooterColumnsProps>(props => {
  const { columns } = props

  const downXs = useDown(460)
  const downMd = useDown('md')

  if (!columns) return null
  if (downXs) {
    return (
      <FooterRow>
        <FooterColumn flex={'1 1 auto'} key={'evenColumns'} sections={columns.flat()} textAlign={'center'} />
      </FooterRow>
    )
  }
  if (downMd) {
    const columnsEven = columns.filter((_, index) => index % 2 === 0).flat()
    const columnsOdd = columns.filter((_, index) => index % 2 === 1).flat()
    return (
      <FooterRow>
        <FooterColumn key={'evenColumns'} sections={columnsEven} />
        <FooterColumn key={'oddColumns'} sections={columnsOdd} />
      </FooterRow>
    )
  }
  return (
    <FooterRow>
      {columns.map((sections, index) => (
        <FooterColumn key={index} sections={sections} />
      ))}
    </FooterRow>
  )
})

FooterColumns.displayName = 'Footer Mobile Column'
export default FooterColumns
