import { Box, VStack } from "@chakra-ui/react"
import { motion } from "framer-motion"
import React, { FC } from "react"
import { OPACITY_ON_LOAD } from "../Layouts/animations"

// ✅ Wrap Chakra components with Framer Motion
const MotionVStack = motion(VStack)

interface MainFrameProps {
  children: React.ReactNode
  title?: string
}

const MainFrame: FC<MainFrameProps> = ({ children }) => {
  return (
    <MotionVStack overflowY="scroll" {...OPACITY_ON_LOAD} w="100%" h="94.5%"  p={3} ps={1} pt={3}   >
      <Box
        w="100%"
        h="100vh"
        bg="#ffffff"
        rounded="md"
        boxShadow={'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
      >
        {children}
      </Box>
    </MotionVStack>
  )
}

export default MainFrame
