import { Box, Text, 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, title }) => {
  return (
    <MotionVStack {...OPACITY_ON_LOAD} w="100%" h="94%" p={4} pt={0} pb={0}  >
      <Text color={'#fff'} w="100%" fontSize="sm" display="flex" alignItems="center" h="3%">
        {title}
      </Text>
      <Box
        w="100%"
        h="97%"
        border="1px solid #ffffff30"
        bg="#434A5330"
        rounded="md"
        backdropFilter="blur(10px)"
        shadow={'xs'} 
      >
        {children}
      </Box>
    </MotionVStack>
  )
}

export default MainFrame
