import { ComponentType, forwardRef } from "react";
import { motion, HTMLMotionProps } from "framer-motion";
import { LucideProps } from "lucide-react";
import { cn } from "@/lib/cn";

type Props = HTMLMotionProps<"button"> & {
    icon: ComponentType<LucideProps>;
    title: string;
    description?: string;
    active?: boolean;
    iconSize?: number;
    iconBackground?: boolean;
};

export const NavItem = forwardRef<HTMLButtonElement, Props>(
    function NavItem(
        {
            icon: Icon,
            title,
            description,
            active = false,
            iconSize = 15,
            iconBackground = true,
            className,
            type = "button",
            ...props
        },
        ref,
    ) {
        return (
            <motion.button
                ref={ref}
                type={type}
                whileTap={{ scale: 0.98 }}
                className={cn(
                    "w-full flex items-center gap-3 p-1.5 rounded-lg cursor-default outline-none text-left",
                    "transition-colors duration-150",
                    active
                        ? "bg-nb-gray-930"
                        : "hover:bg-nb-gray-940",
                    className,
                )}
                {...props}
            >
                {iconBackground ? (
                    <div
                        className={cn(
                            "h-9 w-9 rounded-md flex items-center justify-center shrink-0",
                            "transition-colors duration-150",
                            active ? "bg-nb-gray-800" : "bg-nb-gray-920",
                        )}
                    >
                        <Icon
                            size={iconSize}
                            className={cn(
                                "transition-colors duration-150",
                                active
                                    ? "text-nb-gray-200"
                                    : "text-nb-gray-400",
                            )}
                        />
                    </div>
                ) : (
                    <Icon
                        size={iconSize}
                        className={cn(
                            "shrink-0 ml-2 transition-colors duration-150",
                            active ? "text-nb-gray-200" : "text-nb-gray-400",
                        )}
                    />
                )}
                <div className={"min-w-0"}>
                    <h2
                        className={cn(
                            "font-medium text-[0.81rem] truncate",
                            active ? "text-nb-gray-100" : "text-nb-gray-200",
                        )}
                    >
                        {title}
                    </h2>
                    {description && (
                        <p
                            className={cn(
                                "text-xs font-medium truncate",
                                active ? "text-nb-gray-300" : "text-nb-gray-400",
                            )}
                        >
                            {description}
                        </p>
                    )}
                </div>
            </motion.button>
        );
    },
);