"use client"
import React from 'react';

import { IoGameController } from "react-icons/io5";
import { AiFillAppstore } from "react-icons/ai";
import { MdOutlineLocalMovies } from "react-icons/md";
import { LuBookMarked } from "react-icons/lu";
import { motion } from "framer-motion";
import Link from 'next/link';
import { CiStar } from "react-icons/ci";




const Footer = () => {

  const path = "অ্যাপ"

     const routes = [
        { route: "/#", name: "গেম", icon : <IoGameController />  },
        { route: "/#", name: "অ্যাপ", icon : <AiFillAppstore /> },
        { route: "/#", name: "সিনেমা", icon : <MdOutlineLocalMovies /> },
        { route: "/#", name: "বই", icon : <LuBookMarked /> },
        { route: "/#", name: "বাচ্চাদের", icon : <CiStar /> },
    ];

  return (
    <div className=' bg-white w-full px-2 py-3 mx-auto'>
            <div className=' flex gap-1 w-full justify-between'>
                {routes.map((item, idx) => (
                    <motion.div
                        key={item.route}
                        className={`relative inline-block`}
                    >
                        <Link
                            href={item.route}
                            className={`px-3 py-1 relative block ${path === item.name ? "text-green-600 rounded-lg" : ""}`}
                        >
                            <div className='relative text-center z-50 gap-1'>
                                {/* Show icon only for mobile screens */}
                                <div className=" mx-auto w-fit text-center md:text-2xl text-xl my-auto">
                                    {item.icon}
                                </div>
                                {/* Show text and icon for larger screens */}
                                <div className=" text-nowrap text-sm">
                                    {item.name}
                                </div>
                            </div>
                        </Link>
                    </motion.div>
                ))}
            </div>
        </div>
  );
};

export default Footer;