import clsx from 'clsx'
import React, { FC, ReactNode } from 'react'

import { theming } from '../../themes'
import { useStyles } from './styles'

type FloatedWrapperProps = {
  children: ReactNode
  floated?: boolean
  className?: string
  withGradient?: boolean
  bottomPadding?: boolean
}

export const FloatedWrapper: FC<FloatedWrapperProps> = ({
  children,
  floated,
  withGradient,
  bottomPadding,
  className,
}) => {
  const { floatedButtonWrapper, gradient, padding } = useStyles({ theme: theming.useTheme() })

  if (!floated) return <>{children}</>

  return (
    <div className={clsx(floatedButtonWrapper, className, withGradient && gradient, bottomPadding && padding)}>
      {children}
    </div>
  )
}
