import { Button } from '@/components/ui/button';
import { Mic, MicOff, PhoneOff } from 'lucide-react';

interface ActiveCallBarProps {
  remoteUserName: string;
  isMuted: boolean;
  onToggleMute: () => void;
  onHangup: () => void;
}

export function ActiveCallBar({
  remoteUserName,
  isMuted,
  onToggleMute,
  onHangup,
}: ActiveCallBarProps) {
  return (
    <div className="flex items-center justify-between px-4 py-2 bg-muted/50 border-t border-border">
      <span className="text-sm text-muted-foreground">
        En appel avec {remoteUserName}
      </span>
      <div className="flex gap-2">
        <Button
          variant="ghost"
          size="sm"
          onClick={onToggleMute}
          className="h-8 w-8 p-0"
          aria-label={isMuted ? 'Activer le micro' : 'Couper le micro'}
        >
          {isMuted ? (
            <MicOff className="h-4 w-4 text-destructive" />
          ) : (
            <Mic className="h-4 w-4" />
          )}
        </Button>
        <Button
          variant="destructive"
          size="sm"
          onClick={onHangup}
          className="h-8 w-8 p-0"
          aria-label="Raccrocher"
        >
          <PhoneOff className="h-4 w-4" />
        </Button>
      </div>
    </div>
  );
}