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 FlyoutMenuFooterProps = Props & typeof defaultProps & NativeAttrs

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

  return (
    <div {...props}>
      {children}
      <style jsx>{`
        div {
          display: none;
        }

        div :global(a),
        div :global(button) {
          color: inherit;
        }
        div :global(a:not(:last-child)),
        div :global(button:not(:last-child)) {
          margin-right: 32px;
        }
        div :global(a) > :global(svg),
        div :global(button) > :global(svg) {
          margin-left: 8px;
        }

        @media (min-width: ${theme.layout.breakpointMobile}) {
          div {
            position: absolute;
            left: 0;
            bottom: 0;
            display: inline-block;
            line-height: 1.75rem;
          }
        }
      `}</style>
    </div>
  )
}

export default withDefaults(FlyoutMenuFooter, defaultProps)