'use client';
import React, { useState } from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export interface NavRailItemProps {
  icon: React.ReactNode;
  label: string;
  active?: boolean;
  onClick?: () => void;
  className?: string;
}

export const NavRailItem: React.FC<NavRailItemProps> = ({
  icon,
  label,
  active = false,
  onClick,
  className,
}) => {
  const [showTooltip, setShowTooltip] = useState(false);

  return (
    <div className="relative">
      <button
        onClick={onClick}
        onMouseEnter={() => setShowTooltip(true)}
        onMouseLeave={() => setShowTooltip(false)}
        aria-label={label}
        className={twMerge(
          clsx(
            'w-10 h-10 rounded-lg flex items-center justify-center',
            'transition-all duration-150 ease-out',
            'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-indigo-500/50',
            active
              ? 'text-indigo-400 bg-indigo-500/10'
              : 'text-gray-500 hover:text-gray-300 hover:bg-gray-800',
          ),
          className,
        )}
      >
        {icon}
      </button>

      {/* Tooltip — right side */}
      {showTooltip && (
        <div
          className={clsx(
            'absolute left-full top-1/2 -translate-y-1/2 ml-3 z-50',
            'px-2.5 py-1 text-xs font-medium text-gray-100',
            'bg-gray-800 border border-gray-700 rounded-md shadow-lg shadow-black/30',
            'whitespace-nowrap pointer-events-none',
            'animate-[fadeIn_0.1s_ease-out]',
          )}
          role="tooltip"
        >
          {label}
        </div>
      )}
    </div>
  );
};

NavRailItem.displayName = 'NavRailItem';
