import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import Sidebar from '../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-buttons">
            <img src="path_to_image" 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;
