import React, { useState, useEffect } from "react";
import "../Dashboard/CSS/CSS/SetupView.css"; // Assuming you have a CSS file for styling
import { useNavigate } from "react-router-dom";
import Spinner from '../../UIComponants/Spinner';

function SetupView({
  onUserMaintenanceClick,
  onMenuAccessControl,
  onUserGroupMaintenance,
  onSystemParameter,
  onMenuMaintenance,
  onAccessType,
  onAPIregistry,
  onTokenregistry,
  onDataType1,
  onDataType2,
  onDataType3,
  onDataType4,
  onDataType5,
  onDataType6,
  onDynamicTable,
  oncodeExtension,
}) {
  const navigate = useNavigate();
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Simulate loading data
    setTimeout(() => {
      setLoading(false);
    }, 3000); // Simulated 3 seconds loading
  }, []);

  return (

    <div className="setup-view">
      {loading ? (
        <Spinner /> // Display the spinner while loading
      ) : (
        <div className="usercards-container">
         <div className="usercards">
  <div className="usercard" onClick={() => navigate("/admin/user-maintenance")}>
    <i className="fa fa-user-cog card-icon"></i>
    <h3>User Maintenance</h3>
    <p>User Maintainance</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/user-Group-Maintenance")}>
    <i className="fa-solid fa-users"></i>
    <h3>User Group Maintenance</h3>
    <p>User Group Maintenance</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/menu-maintenance")}>
    <i className="fa-solid fa-utensils"></i>
    <h3>Menu Maintenance</h3>
    <p>Menu Maintenance</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/menu-access-control")}>
    <i className="fa-solid fa-lock"></i>
    <h3>Menu Access Control</h3>
    <p>Menu Access Control</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/system-parameter")}>
    <i className="fa-solid fa-gears"></i>
    <h3>System Parameter</h3>
    <p>System Parameter</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/access-type")}>
    <i className="fa-solid fa-key"></i>
    <h3>Access Type</h3>
    <p>Access Type</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/sequence-generator")}>
  <i className="fa-solid fa-list-ol"></i>
  <h3>Document Sequence</h3>
  <p>Manage document sequences</p>
</div>
<div className="usercard" onClick={() => navigate("/admin/user-report")}>
    <i className="fa fa-file"></i>
    <h3>Reports</h3>
    <p>Reports Description</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/api-registry")}>
    <i className="fas fa-database"></i>
    <h3>API Registry</h3>
    <p>API Registry</p>
  </div>
  <div className="usercard" onClick={() => navigate("/admin/token-registry")}>
    <i className="fas fa-database"></i>
    <h3>Token Registry</h3>
    <p>Token Registry</p>
  </div>
  
</div>
</div>
      )}
    </div>


  );
}

export default SetupView;