'use client'
import { FC, useState } from "react";
import Link from "next/link";
import LoadingContent from "@/components/mutual/loader/component";

interface ThirdLayerDropdownProps {
    isActive: boolean,
    innerText: string,
    url: string,
}

const ThirdLayerDropdown: FC<ThirdLayerDropdownProps> = ({ isActive, innerText, url }) => {
    const [isLoading, setIsLoading] = useState<boolean>(false);

    // Base styles
    const baseClassName = "py-2 my-1 px-3 text-sm rounded-lg bg-black transition-colors duration-200 flex items-center w-full";

    // Determine the appropriate class based on active state
    let className = baseClassName;
    if (isActive) {
        className += " bg-emerald-500 text-white font-medium";
    } else {
        className += " bg-emerald-600 text-white hover:bg-emerald-500";
    }

    if (isActive) {
        return (
            <div className={`${className} cursor-not-allowed`}>
                <span className="ml-2">{innerText}</span>
            </div>
        );
    } else if (isLoading) {
        return (
            <div className={className}>
                <LoadingContent height="h-5" size="w-5 h-5" plane="" />
                <span className="ml-2">{innerText}</span>
            </div>
        );
    } else {
        return (
            <Link href={url} onClick={() => setIsLoading(true)} className="block">
                <div className={className}>
                    <span className="ml-2">{innerText}</span>
                </div>
            </Link>
        );
    }
};

export default ThirdLayerDropdown;