import React from 'react';
import { Link, useNavigate } from 'react-router-dom';
import { DocumentTextIcon, KeyIcon, ChartBarIcon, ClipboardListIcon, CogIcon, LogoutIcon, TemplateIcon } from '@heroicons/react/outline';

function Sidebar() {
  const navigate = useNavigate();

  const handleLogout = () => {
    // Clear any stored user data (e.g., tokens) here
    localStorage.removeItem('token'); // Example, adjust based on your implementation
    navigate('/login');
  };

  return (
    <div className="bg-gray-800 text-white w-64 p-4 space-y-6">
      <h2 className="text-2xl font-bold">HiDigi</h2>
      <nav>
        <ul className="space-y-4">
          <li className="hover:bg-gray-700 p-2 rounded-lg">
            <Link to="/ocrdashboard" className="flex items-center space-x-2">
              <DocumentTextIcon className="h-6 w-6" />
              <span>Home</span>
            </Link>
          </li>
          <li className="hover:bg-gray-700 p-2 rounded-lg">
            <Link to="/ocrtemplate" className="flex items-center space-x-2">
              <TemplateIcon className="h-6 w-6" />
              <span>Application Template</span>
            </Link>
          </li>
          <li className="hover:bg-gray-700 p-2 rounded-lg">
            <Link to="/erpcredential" className="flex items-center space-x-2">
              <KeyIcon className="h-6 w-6" />
              <span>Manage Credentials</span>
            </Link>
          </li>
          <li className="hover:bg-gray-700 p-2 rounded-lg">
            <Link to="/summary" className="flex items-center space-x-2">
              <ChartBarIcon className="h-6 w-6" />
              <span>Summary</span>
            </Link>
          </li>
          <li className="hover:bg-gray-700 p-2 rounded-lg">
            <Link to="/transaction-detail" className="flex items-center space-x-2">
              <ClipboardListIcon className="h-6 w-6" />
              <span>Transaction Detail</span>
            </Link>
          </li>
          <li className="hover:bg-gray-700 p-2 rounded-lg">
            <Link to="/settings" className="flex items-center space-x-2">
              <CogIcon className="h-6 w-6" />
              <span>Settings</span>
            </Link>
          </li>
          <li className="hover:bg-gray-700 p-2 rounded-lg">
            <Link to="/logout" className="flex items-center space-x-2">
              <LogoutIcon className="h-6 w-6" />
              <span>Logout</span>
            </Link>
          </li>
        </ul>
      </nav>
    </div>
  );
}

export default Sidebar;