import React from 'react';
import { clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export interface NavRailProps {
  children: React.ReactNode;
  header?: React.ReactNode;
  footer?: React.ReactNode;
  className?: string;
}

export const NavRail: React.FC<NavRailProps> = ({
  children,
  header,
  footer,
  className,
}) => {
  return (
    <nav
      className={twMerge(
        clsx(
          'w-16 h-full flex flex-col items-center',
          'bg-gray-950 border-r border-gray-800',
          'py-4 gap-1 shrink-0',
        ),
        className,
      )}
    >
      {/* Logo / header slot */}
      {header && <div className="mb-4">{header}</div>}

      {/* Navigation items */}
      <div className="flex flex-col items-center gap-1 flex-1">{children}</div>

      {/* Footer slot (settings, avatar, etc.) */}
      {footer && <div className="mt-auto pt-4 border-t border-gray-800">{footer}</div>}
    </nav>
  );
};

NavRail.displayName = 'NavRail';