import React from "react";
import { motion, useAnimation } from "framer-motion";
import styled from 'styled-components';
import ICategory from "../../models/ICategory"

interface IProps {
    item: ICategory;
}

const NavIcon = styled(motion.span)`
    display: flex;
    align-items: center;
    justify-content: center;
    svg {
        width: clamp(10px, 6vw, 30px);
        height: clamp(10px, 6vw, 30px);
    }
`;

const MenuItemContainer = styled.div.attrs({
    className: "relative flex justify-center items-center w-full h-full transition-all duration-300 ease-in-out"
})``;

const ToolTipGlass = styled(motion.div).attrs({
    className: "hidden absolute top-0 transform translate-x-10 w-auto h-auto max-w-[25px] transition-all duration-300 ease-in-out opacity-0"
})`
    h3 {
        padding: 8px 12px;
        backdrop-filter: blur(2px);
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        background-color: rgba(16, 19, 31, 0.81);
        border: 1px solid rgba(255, 255, 255, 0.2);
        color: #f8fffe;
        font-weight: 500;
        font-size: 28px;
        line-height: 20px;
    }
`;

const MenuItem = ({ item }: IProps) => {
    const controls = useAnimation();

    const handleHoverStart = () => {
        controls.start({
            scale: 1.2,
            transition: { duration: 0.2 }
        });
    };

    const handleHoverEnd = () => {
        controls.start({
            scale: 1,
            transition: { duration: 0.2 }
        });
    };

    return (
        <MenuItemContainer>
            <a href={item.link} onMouseEnter={handleHoverStart} onMouseLeave={handleHoverEnd}>
                <NavIcon animate={controls}>
                    {React.cloneElement(item.icon, {})}
                    <ToolTipGlass>
                        <h3>{item.name}</h3>
                    </ToolTipGlass>
                </NavIcon>
            </a>
        </MenuItemContainer>
    );
};

export { MenuItem };