'use client';
import { FC } from "react";

interface SecondLayerDropdownProps {
    isActive: boolean;
    isExpanded: boolean;
    innerText: string;
    onClick: () => void;
}

const SecondLayerDropdown: FC<SecondLayerDropdownProps> = ({ isActive, isExpanded, innerText, onClick }) => {
    // Base styles
    const baseClassName = "py-2 my-1 px-3 text-sm rounded-lg cursor-pointer transition-colors duration-200 flex justify-between items-center w-full";
    
    // Determine the appropriate class based on active and expanded states
    let className = baseClassName;
    if (isActive) {
        className += " bg-emerald-600 text-white font-medium";
    } else if (isExpanded) {
        className += " bg-emerald-500 text-white";
    } else {
        className += " bg-emerald-700 text-white hover:bg-emerald-600";
    }

    return (
        <div onClick={onClick} className={className}>
            <span>{innerText}</span>
            {isExpanded ? (
                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 15l7-7 7 7" />
                </svg>
            ) : (
                <svg xmlns="http://www.w3.org/2000/svg" className="h-3 w-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                </svg>
            )}
        </div>
    );
};

export default SecondLayerDropdown;