import React from 'react'
import withDefaults from '../utils/with-defaults'
import useTheme from '../use-theme'

interface Props {
  className?: string
}

const defaultProps = {
  className: ''
}

type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>
export type FooterFootProps = Props & typeof defaultProps & NativeAttrs

const FooterFoot: React.FC<React.PropsWithChildren<FooterFootProps>> = ({ children, ...props }) => {
  const theme = useTheme()

  return (
    <section {...props}>
      <ul>
        {React.Children.toArray(children).map((link: any, index: number) => (
          <li key={`${link.props.href}-${index}`} className={`${link.props.block ? 'block' : ''}`}>
            {link}
          </li>
        ))}
      </ul>
      <style jsx>{`
        section {
          max-width: ${theme.layout.pageWidthWithMargin};
          display: flex;
          border-top: 1px solid ${theme.palette.border};
          padding: ${theme.layout.gap};
          margin: auto;
        }

        ul {
          list-style: none;
          margin: 0;
          padding: 0;
          display: inline;
        }

        li {
          display: inline-block;
          margin: ${theme.layout.gapQuarter} ${theme.layout.gap} ${theme.layout.gapQuarter} 0;
          line-height: ${theme.layout.gap};
        }
        li:before {
          display: none;
        }

        @media (min-width: ${theme.layout.breakpointMobile}) {
          section {
            justify-content: space-between;
          }

          ul {
            display: flex;
            flex: 1 1 0;
          }

          li {
            display: flex;
            margin: 0;
          }
          li.block {
            margin-left: auto;
          }
          li + li:not(.block) {
            margin-left: ${theme.layout.gap};
          }
        }
      `}</style>
    </section>
  )
}

export default withDefaults(FooterFoot, defaultProps)