import React from 'react';

interface NavProps {
  isCollapsed: boolean;
  links: {
    title: string;
    label?: string;
    icon: React.ReactNode;
    variant: 'default' | 'ghost';
  }[];
}

export function Nav({ links, isCollapsed }: NavProps) {
  return (
    <div className="space-y-1 px-2">
      {links.map((link, index) => (
        <button
          key={index}
          className={`w-full flex items-center py-2 px-2 rounded-md text-sm ${
            link.variant === 'default' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:bg-gray-100'
          } ${isCollapsed ? 'justify-center' : 'justify-between'}`}
        >
          <div className="flex items-center gap-3">
            <span className="w-5 h-5 flex items-center justify-center">
              {link.icon}
            </span>
            {!isCollapsed && (
              <span>{link.title}</span>
            )}
          </div>
          {!isCollapsed && link.label && (
            <span className="text-xs text-gray-500">{link.label}</span>
          )}
        </button>
      ))}
    </div>
  );
}