import React from 'react';
import { User, LogOut, RefreshCw } from 'lucide-react';
import { User as UserType } from '../types';

interface SessionIndicatorProps {
  user: UserType | null;
  secondsRemaining: number;
  onRenew: () => void;
  onLogout: () => void;
}

export const SessionIndicator: React.FC<SessionIndicatorProps> = ({
  user,
  secondsRemaining,
  onRenew,
  onLogout,
}) => {
  if (!user) return null;

  return (
    <div className="fixed bottom-4 left-1/2 -translate-x-1/2 z-40 flex items-center gap-2.5 px-4 py-2 rounded-full bg-[var(--accent)] text-white shadow-xl border border-sky-400/30 text-xs sm:text-sm font-semibold animate-in slide-in-from-bottom-3 duration-300">
      <div className="w-2 h-2 rounded-full bg-emerald-400 animate-ping shrink-0" />
      <div className="flex items-center gap-1.5">
        <span>Session :</span>
        <span className="text-sky-200 font-bold">{user.nom}</span>
        <span className="opacity-75">({secondsRemaining}s)</span>
      </div>

      <div className="flex items-center gap-1 ml-1 pl-2 border-l border-white/20">
        <button
          onClick={onRenew}
          className="p-1 rounded-md hover:bg-white/10 text-sky-200 transition-colors cursor-pointer"
          title="Prolonger de 60 secondes"
        >
          <RefreshCw className="w-3.5 h-3.5" />
        </button>
        <button
          onClick={onLogout}
          className="p-1 rounded-md hover:bg-white/10 text-red-200 transition-colors cursor-pointer"
          title="Fermer la session"
        >
          <LogOut className="w-3.5 h-3.5" />
        </button>
      </div>
    </div>
  );
};