import { useState } from 'react';
import { motion } from 'framer-motion';
import NavBody from "./NavBody"
import NavFooter from "./NavFooter"
import vidoBg from "../assets/vido-bg.mp4"
import { IoMdPlayCircle } from "react-icons/io";

const links = [
    {
        title: "Home",
        href: "/"
    },
    {
        title: "Work",
        href: "/"
    },
    {
        title: "Services & Models",
        href: "/"
    },
    {
        title: "About",
        href: "/"
  
    },
    {
      title: "Contact",
      href: "/"
    }
]

const Navbar = () => {
    const [selectedLink, setSelectedLink] = useState({isActive: false, index: 0});
    const transition = {duration: 1, ease: [0.76, 0, 0.24, 1]}
    const height = {
        initial: {
            height: 0
        },
        enter: {
            height: "auto",
            transition
        },
            exit: {
            height: 0,
            transition
        }
    }

  return (
    <motion.div variants={height} initial="initial" animate="enter" exit="exit" className="overflow-hidden bg-[#FF5F38] flex flex-col">
        <div className="px-[8vw] sm:px-[3vw] grid grid-cols-2">
            <div className='video-container flex flex-col w-[26vw] sm:w-[22vw]'>
                <video src={vidoBg} autoPlay loop muted className="w-[26vw] h-[16.5vw] sm:w-[23vw] sm:h-[14.5vw] object-cover rounded-md my-2"></video>
                <div className='flex justify-between mt-2'>
                    <p className='flex gap-[1vw] sm:gap-[1vw] text-center items-center text-[3vw] sm:text-[1vw] cursor-pointer'><IoMdPlayCircle className='text[4vw] sm:text-[2vw]'/> <span className='btn'>Play reel</span></p>
                    <p className='text-[3vw] sm:text-[1vw]'>-01:18</p>
                </div>
            </div>
            <div>
                <NavBody links={links} selectedLink={selectedLink} setSelectedLink={setSelectedLink}/>
            </div>
        </div>
        <NavFooter/>
    </motion.div>
  )
}

export default Navbar