import React from 'react';
import { Check } from 'lucide-react';

export default function LogoutScreen({ user, onComplete }) {
  return (
    <div style={{
      minHeight: '100vh',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#1b1d1e', // Dark background matching exact screenshot 1
      padding: '1.5rem',
      fontFamily: 'system-ui, -apple-system, sans-serif'
    }}>
      <div style={{
        width: '100%',
        maxWidth: '440px',
        background: '#ffffff',
        borderRadius: '8px',
        padding: '3rem 2rem',
        textAlign: 'center',
        boxShadow: '0 10px 30px rgba(0,0,0,0.5)'
      }}>
        {/* Green Check Circle */}
        <div style={{
          width: '72px',
          height: '72px',
          borderRadius: '50%',
          border: '2px solid #86efac',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          margin: '0 auto 1.5rem'
        }}>
          <Check size={40} color="#22c55e" strokeWidth={2.5} />
        </div>

        <h2 style={{ fontSize: '1.6rem', fontWeight: '700', color: '#2d3748', marginBottom: '0.8rem' }}>
          Cerrando Sesión
        </h2>

        <p style={{ fontSize: '0.9rem', color: '#718096', lineHeight: 1.5, marginBottom: '2rem' }}>
          ¡Hasta luego {user?.name || 'PATRICIA FERNANDEZ CUEVAS'}! Que tengas un excelente día, nos vemos pronto.
        </p>

        {/* Multicolor Spinner Circle */}
        <div style={{
          width: '40px',
          height: '40px',
          margin: '0 auto',
          borderRadius: '50%',
          border: '4px solid transparent',
          borderTopColor: '#ea4335',
          borderRightColor: '#4285f4',
          borderBottomColor: '#fbbc05',
          borderLeftColor: '#34a853',
          animation: 'spin 1s linear infinite'
        }} />

        <style>{`
          @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
          }
        `}</style>
      </div>
    </div>
  );
}