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
  transperant?:boolean
  props?:any
}

const MainFrame: FC<MainFrameProps> = ({ children, transperant, props }) => {
  return (
    <MotionVStack {...props} overflow={'auto'}   {...OPACITY_ON_LOAD} w="100%" minH="93%"   pe={2} ps={1.5} pt={1}  pb={2}>
      <Box
        w="100%"
        // h="100%"
        bg={transperant?'transperant':"#ffffff"}
        // overflow={'scroll'}
        rounded="lg"
        boxShadow={transperant?'none':'rgba(99, 99, 99, 0.2) 0px 2px 8px 0px'}
        pt={transperant?0:3}
        h={'100%'}
        overflow={'auto'}
      >
        {children}
      </Box>
    </MotionVStack>
  )
}

export default MainFrame