import { motion } from 'framer-motion'

import { clientAnimationTransition } from '@/lib/clientAnimation'
import { useClientBehaviourSettings } from '@/lib/useClientBehaviourSettings'
import { cn } from '@/lib/utils'

import type { FC, ReactNode } from 'react'

type Props = {
    children:   ReactNode
    className?: string }


const MainArea: FC<Props> = ({ children, className }) => {
  const behaviourSettings = useClientBehaviourSettings ()
  const animationMode = behaviourSettings.animation ?? 'normal'
  const layoutTransition = clientAnimationTransition (
      animationMode,
      { normal: { duration: .2, ease: 'easeOut' as const } },
  )

  return (
      <motion.main
	  transition={{ layout: layoutTransition }}
	  className={cn ('flex-1 overflow-y-auto p-4', className)}
	  layout={animationMode === 'off' ? false : 'position'}>
	{children}
      </motion.main>)
}

export default MainArea