import React from "react";

const UserProfileScreen = ({ user, onLogout }) => {
  if (!user) return null;

  return (
    <div className="w-full max-w-sm mx-auto p-4 sm:p-8 animate-fadeInUp flex flex-col items-center">
      {/* Success Checkmark */}
      <div className="w-16 h-16 bg-green-100 rounded-full flex items-center justify-center mb-6">
        <svg className="w-8 h-8 text-green-500" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
          <polyline points="20 6 9 17 4 12" />
        </svg>
      </div>

      <h2 className="text-2xl font-bold text-dark-900 mb-2">
        {user.isNewRegistration ? "Successfully Registered!" : "Successfully Logged In!"}
      </h2>
      <p className="text-sm text-dark-500 mb-8 text-center">
        Welcome to your road.rentals dashboard.
      </p>

      {/* User Info Card */}
      <div className="w-full bg-gray-50 border border-gray-200 rounded-2xl p-6 flex flex-col items-center mb-6">
        <img 
          src={user.picture} 
          alt={user.name} 
          className="w-20 h-20 rounded-full border-4 border-white shadow-md mb-4 object-cover"
        />
        <h3 className="text-lg font-bold text-dark-900">{user.name}</h3>
        <p className="text-sm text-dark-500">{user.email}</p>
      </div>

      {/* Logout Button */}
      <button 
        onClick={onLogout}
        className="w-full bg-red-50 hover:bg-red-100 text-red-600 font-bold text-sm py-3.5 rounded-xl transition-colors flex items-center justify-center gap-2"
      >
        <svg xmlns="http://www.w3.org/2000/svg" className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4"/><polyline points="16 17 21 12 16 7"/><line x1="21" y1="12" x2="9" y2="12"/></svg>
        Logout
      </button>
    </div>
  );
};

export default UserProfileScreen;
