import React, { PropsWithChildren } from 'react'
import useTheme from '../use-theme'

const ModalActions: React.FC<PropsWithChildren<unknown>> = ({ children, ...props }) => {
  const theme = useTheme()
  return (
    <>
      <div />
      <footer {...props}>{children}</footer>
      <style jsx>{`
        footer {
          display: flex;
          overflow: hidden;
          width: 100%;
          height: 3.625rem;
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          border-top: 1px solid ${theme.palette.border};
          border-bottom-left-radius: ${theme.layout.radius};
          border-bottom-right-radius: ${theme.layout.radius};
        }

        footer > :global(button.btn + button.btn) {
          border-left: 1px solid ${theme.palette.border};
        }

        div {
          height: 3.625rem;
          flex-shrink: 0;
        }
      `}</style>
    </>
  )
}

const MemoModalActions = React.memo(ModalActions)

export default MemoModalActions