"use client"
import React, { useEffect, useState } from 'react'

import Link from 'next/link'
import { FiChevronDown, FiChevronUp } from 'react-icons/fi';
import { CoursesProps } from '@/types'
//define props type
type Props = {
    showNav: boolean;

    courses: CoursesProps[]
}

const MobileNav = ({ showNav, courses }: Props) => {
    const [dropdownOpen, setDropdownOpen] = useState(false);
    useEffect(() => {
        if (showNav) {
            document.body.classList.add('overflow-hidden');
        } else {
            document.body.classList.remove('overflow-hidden');
        }

        return () => {
            document.body.classList.remove('overflow-hidden');
        };
    }, [showNav]);

    const navOpen = showNav ? 'translate-x-0' : 'translate-x-[-100%]'
    const navClose = !showNav ? 'translate-x-[-100%]' : 'translate-x-0'

    return (
        <div>
            {/*overlay*/}
            <div className={`fixed ${navOpen} ${navClose} transform transition-all duration-500 top-[7vh] inset-x-0 bottom-0 z-[1000]`}>

                {/* nav links*/}
                <div className={`text-white ${navOpen} fixed flex flex-col h-full w-[80%] sm:w-[60%] bg-[#F9E7E9] z-[10000] `}>

                    <div className='w-full h-16 flex justify-start items-center border-b-[1.5px] border-[#F5DADF]'>
                        <Link key={"01"} href={"/"} >
                            <p className="text-xl ml-6 text-black">
                                主頁
                            </p>
                        </Link>
                    </div>
                    <div className={`w-full flex flex-col ${dropdownOpen ? "border-b-[0px]" : "border-b-[1.5px]"}  border-[#F5DADF]`}>
                        <div
                            className='h-16 flex justify-between items-center px-6 cursor-pointer'
                            onClick={() => setDropdownOpen(!dropdownOpen)}
                        >
                            <p className="text-xl text-black">課程</p>
                            {dropdownOpen ? <FiChevronUp className='text-black' size={30} /> : <FiChevronDown className='text-black' size={30} />}
                        </div>
                        {dropdownOpen && (
                            <div>
                                {courses?.map((course, index) => (
                                    <div key={index} className='bg-[#F5DADF] w-full h-16 flex justify-start items-center border-b-[1.5px] border-[#F9E7E9]'>
                                        <Link key={course.id} href={`/courses/${course.id}`}>
                                            <p className="text-lg text-black ml-8 ">
                                                {course.title}
                                            </p>
                                        </Link>
                                    </div>
                                ))}
                            </div>
                        )}
                    </div>
                    <div className='w-full h-16 flex justify-start items-center border-b-[1.5px] border-[#F5DADF]'>
                        <Link key={"03"} href="/electronicorgan" >
                            <p className="text-xl ml-6 text-black">
                                電子管風琴
                            </p>
                        </Link>
                    </div>

                    <div className='w-full h-16 flex justify-start items-center border-b-[1.5px] border-[#F5DADF]'>
                        <Link key={"04"} href="/aboutus" >
                            <p className="text-xl ml-6 text-black">
                                關於我們
                            </p>
                        </Link>
                    </div>


                </div>
            </div>
        </div>
    )
}

export default MobileNav