import { cn } from '@/lib/utils';

export interface ListItem {
  id: string;
  content: React.ReactNode;
  actions?: React.ReactNode;
  onClick?: () => void;
  disabled?: boolean;
}

export interface ListProps {
  items: ListItem[];
  variant?: 'default' | 'bordered' | 'spaced';
  emptyMessage?: string;
  className?: string;
  itemClassName?: string;
}

/**
 * Composant List réutilisable avec items, actions, et variants.
 */
export function List({
  items,
  variant = 'default',
  emptyMessage,
  className,
  itemClassName,
}: ListProps) {
  if (items.length === 0 && emptyMessage) {
    return (
      <div className="py-8 text-center text-sm text-muted-foreground">
        {emptyMessage}
      </div>
    );
  }

  if (items.length === 0) {
    return null;
  }

  return (
    <ul
      className={cn(
        'list-none',
        variant === 'bordered' && 'divide-y divide-border rounded-md border',
        variant === 'spaced' && 'space-y-2',
        variant === 'default' && 'space-y-1',
        className,
      )}
    >
      {items.map((item) => (
        <li
          key={item.id}
          onClick={item.onClick && !item.disabled ? item.onClick : undefined}
          className={cn(
            'flex items-center justify-between',
            variant === 'bordered' && 'px-4 py-3',
            variant === 'spaced' && 'px-2 py-2',
            variant === 'default' && 'px-2 py-2',
            item.onClick && !item.disabled && 'cursor-pointer hover:bg-accent',
            item.disabled && 'cursor-not-allowed opacity-50',
            itemClassName,
          )}
        >
          <div className="flex-1">{item.content}</div>
          {item.actions && (
            <div
              className="ml-4 flex items-center gap-2"
              onClick={(e) => e.stopPropagation()}
            >
              {item.actions}
            </div>
          )}
        </li>
      ))}
    </ul>
  );
}
