'use client';

import { LiveIndicator } from './LiveIndicator';
import { ShareButton } from './ShareButton';
import { CollaboratorAvatars } from './CollaboratorAvatars';
import type { Share } from '@/lib/share-utils';

interface CollaborationToolbarProps {
  isConnected: boolean;
  error: string | null;
  lastEventUser: string | null;
  canEdit: boolean;
  shares: Share[];
  onShareClick: () => void;
}

export function CollaborationToolbar({
  isConnected,
  error,
  lastEventUser,
  canEdit,
  shares,
  onShareClick,
}: CollaborationToolbarProps) {
  return (
    <div className="mb-4 flex items-center justify-between rounded-lg border border-border bg-card p-3">
      <div className="flex items-center gap-4">
        <LiveIndicator isConnected={isConnected} error={error} />

        {lastEventUser && (
          <div className="flex items-center gap-2 text-sm text-muted animate-pulse">
            <span>✏️</span>
            <span>{lastEventUser} édite...</span>
          </div>
        )}

        {!canEdit && (
          <div className="flex items-center gap-2 rounded-full bg-yellow/10 px-3 py-1.5 text-sm text-yellow">
            <span>👁️</span>
            <span>Mode lecture</span>
          </div>
        )}
      </div>

      <div className="flex items-center gap-2">
        <CollaboratorAvatars shares={shares} />
        <ShareButton onClick={onShareClick} />
      </div>
    </div>
  );
}