import { Box, styled } from '@mui/material'
export const StyledFooter = styled(Box)<{
  show: boolean
}>`
  position: fixed;
  background: #fff;
  bottom: ${(props) => (props.show ? '0' : '-70px')};
  right: 16px;
  width: calc(100% - 236px);
  height: 64px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem;
  transition: bottom 400ms ease-in-out;
  box-shadow: 0px -1px 0px 0px rgba(0, 0, 0, 0.1);
`

function FloatingContainer({
  children,
  show,
}: {
  show?: boolean
  children: React.ReactNode
}) {
  return (
    <>
      <StyledFooter show={show}>{children}</StyledFooter>
    </>
  )
}
export default FloatingContainer
