'use client'

import { useEffect } from 'react'
import { LogOut } from 'lucide-react'
import { useTranslations } from 'next-intl'

interface SignOutModalProps {
  isOpen: boolean
  onClose: () => void
  onSignOut: () => Promise<void>
}

export function SignOutModal({ isOpen, onClose, onSignOut }: SignOutModalProps) {
  const t = useTranslations('chat.layout')

  useEffect(() => {
    if (isOpen) {
      // Lancer la déconnexion automatiquement à l'ouverture
      onSignOut()
    }
  }, [isOpen, onSignOut])

  if (!isOpen) return null

  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
      <div className="bg-white dark:bg-gray-800 rounded-2xl shadow-xl border border-gray-200 dark:border-gray-700 p-6 max-w-sm w-full mx-4">
        <div className="flex flex-col items-center text-center space-y-4">
          <div className="w-16 h-16 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center">
            <div className="w-8 h-8 border-4 border-red-600 dark:border-red-400 border-t-transparent rounded-full animate-spin" />
          </div>
          <div className="space-y-2">
            <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
              {t('signingOut')}
            </h3>
            <p className="text-sm text-gray-500 dark:text-gray-400">
              {t('signingOutMessage')}
            </p>
          </div>
        </div>
      </div>
    </div>
  )
}