import React from 'react';
import { useTranslation } from 'react-i18next';
import { Eye, XCircle } from 'lucide-react';
import { User } from '../types';

interface MasqueradeBannerProps {
  effectiveUser: User;
  originalUser: User;
  previousUser: User | null;
  onStop: () => void;
}

const MasqueradeBanner: React.FC<MasqueradeBannerProps> = ({ effectiveUser, originalUser, previousUser, onStop }) => {
  const { t } = useTranslation();

  const buttonText = previousUser ? t('platform.masquerade.returnTo', { name: previousUser.name }) : t('platform.masquerade.stopMasquerading');

  return (
    <div className="bg-orange-600 text-white px-4 py-2 shadow-md flex items-center justify-between z-50 relative">
      <div className="flex items-center gap-3">
        <div className="p-1.5 bg-white/20 rounded-full animate-pulse">
          <Eye size={18} />
        </div>
        <span className="text-sm font-medium">
          {t('platform.masquerade.masqueradingAs')} <strong>{effectiveUser.name}</strong> ({effectiveUser.role})
          <span className="opacity-75 mx-2 text-xs">|</span>
          {t('platform.masquerade.loggedInAs', { name: originalUser.name })}
        </span>
      </div>
      <button 
        onClick={onStop}
        className="flex items-center gap-2 px-3 py-1 text-xs font-bold uppercase bg-white text-orange-600 rounded hover:bg-orange-50 transition-colors"
      >
        <XCircle size={14} />
        {buttonText}
      </button>
    </div>
  );
};

export default MasqueradeBanner;