import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Sidebar from '../components/sidebar/Sidebar';
import '../styles/AdminDashboard.css';

const AdminDashboard = () => {
  const navigate = useNavigate();
  const [userName, setUserName] = useState('');

  useEffect(() => {
    const user = JSON.parse(localStorage.getItem('user'));
    if (user && user.name) {
      setUserName(user.name);
    }
  }, []);

  const handleClick = (link) => {
    navigate(link);
  };

  return (
    <div className="dashboard-container">
      <Sidebar />
      <div className="dashboard-content">
        <header className="dashboard-header">
          <h1 className="header-title">admin dashboard</h1>
          <p className="welcome-text">welcome back, {userName}</p>
        </header>
        <main className="dashboard-main">
          <div className="dashboard-main-content">
            <img
              src="https://img.freepik.com/free-photo/well-dressed-businessman-holding-currency-with-confidence-generated-by-ai_188544-16970.jpg?t=st=1722511417~exp=1722515017~hmac=dbe5ab19f8e2c416be4928faac1fc197473166fc4f230d8f46307b84e522ff5a&w=1060"
              alt="Dashboard Graphic"
              className="dashboard-image"
            />
            <button
              className="btn-primary"
              onClick={() => handleClick('')}
            >
              view orders
            </button>
            <button
              className="btn-primary"
              onClick={() => handleClick('/employees')}
            >
              view employees
            </button>
            <button
              className="btn-primary"
              onClick={() => handleClick('')}
            >
              view customers
            </button>
          </div>
        </main>
      </div>
    </div>
  );
};

export default AdminDashboard;