import { Box, Image, SimpleGrid } from '@chakra-ui/react'
import { motion, useInView } from 'framer-motion'
import { useRef } from 'react'

const MotionImage = motion.create(Image)
const MotionBox = motion.create(Box)
const MotionSimpleGrid = motion.create(SimpleGrid)

function OilInfo() {
    const mainRef = useRef(null);
    const isMainInView = useInView(mainRef, { once: true });

    return (
        <MotionBox
            ref={mainRef}
            position="relative"
            w="100%"
            bgColor="#FFFBD3"
            zIndex={3}
            overflow="hidden"
            initial={{ opacity: 0 }}
            animate={isMainInView ? { opacity: 1 } : { opacity: 0 }}
            transition={{ duration: 0.8, ease: "easeOut" }}
        >

            <MotionSimpleGrid
                columns={{ base: 1, sm: 1, md: 2 }}
                p={{ base: 10, sm: 20, md: 20 }}
                w={{ base: '100%', sm: '100%', md: '100%', lg: '70%', xl: '60%' }}
                h={'auto'}
                gap={{ base: 10, md: 0 }}
                mx="auto"
                justifyItems={'center'}
                alignItems={'center'}
                initial={{ opacity: 0, y: 50 }}
                animate={isMainInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 50 }}
                transition={{ duration: 0.8, delay: 0.2, ease: "easeOut" }}
            >

                <MotionBox
                    justifyItems={'center'}
                    alignItems={'center'}
                    initial={{ opacity: 0, x: -50 }}
                    animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: -50 }}
                    transition={{ duration: 0.6, delay: 0.4, ease: "easeOut" }}
                >
                    <MotionImage
                        src='/images/cookmethods.webp'
                        alt='cooking methods'
                        w={{ base: '100%', sm: '90%', md: '85%' }}
                        initial={{ opacity: 0, scale: 0.8 }}
                        animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                        transition={{ duration: 0.5, delay: 0.6, ease: "easeOut" }}
                    />
                </MotionBox>

                <MotionBox
                    justifyItems={'center'}
                    alignItems={'center'}
                    initial={{ opacity: 0, x: 50 }}
                    animate={isMainInView ? { opacity: 1, x: 0 } : { opacity: 0, x: 50 }}
                    transition={{ duration: 0.6, delay: 0.8, ease: "easeOut" }}
                >
                    <MotionImage
                        src='/images/new/recipe_button.webp'
                        w={{ base: '100%', sm: '90%', md: '85%' }}
                        initial={{ opacity: 0, scale: 0.8 }}
                        animate={isMainInView ? { opacity: 1, scale: 1 } : { opacity: 0, scale: 0.8 }}
                        transition={{ duration: 0.5, delay: 1.0, ease: "easeOut" }}
                    />
                </MotionBox>


            </MotionSimpleGrid>

        </MotionBox>
    )
}

export default OilInfo;