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

interface Props {
  className?: string
  onBreadcrumbClick?: () => void
  active?: () => boolean
}

const defaultProps = {
  className: ''
}

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

const FlyoutAction: React.FC<React.PropsWithChildren<FlyoutActionProps>> = ({
  children,
  onBreadcrumbClick: _onBreadcrumbClick,
  active: _active,
  ...props
}) => {
  const theme = useTheme()

  return (
    <li {...props}>
      {children}
      <style jsx>{`
        li {
          bottom: 0;
          left: 0;
          padding: 20px;
          position: fixed;
          width: 100%;
        }

        li :global(a),
        li :global(button) {
          display: block !important;
          width: 100%;
          min-width: auto !important;
        }

        @media (min-width: ${theme.layout.breakpointMobile}) {
          li {
            margin-left: 32px;
            padding: 0;
            position: static;
          }
        }
      `}</style>
    </li>
  )
}

export default withDefaults(FlyoutAction, defaultProps)