'use client'
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/navigation';

const SidebarItem = ({ icon: Icon, text, active, url, onClick }) => (
  <div
    onClick={onClick}
    className={`flex items-center gap-3 px-2 py-2 rounded-md cursor-pointer ${
      active ? 'bg-emerald-50 text-emerald-600' : 'text-gray-600 hover:bg-gray-50'
    }`}
  >
    <Icon size={20} />
    <span>{text}</span>
  </div>
);

function Sidebar({ establishment, currentPage, items }) {
  const router = useRouter();
  const [selectedItem, setSelectedItem] = useState(currentPage);

  useEffect(() => {
    setSelectedItem(currentPage);
  }, [currentPage]);

  const handleItemClick = (url) => {
    setSelectedItem(url);
    router.push(url);
  };

  return <>
    {/* Sidebar */}
    <div className="w-64 bg-white border-r h-full border-gray-200 py-6 px-4">
      <div className="flex items-center mb-8 px-2">
        <div className="text-xl font-semibold">{establishment?.name}</div>
      </div>

      <nav className="space-y-1">
        {
          items.map((item) => (
            <SidebarItem
              key={item.id}
              icon={item.icon}
              text={item.name}
              active={item.id === selectedItem}
              url={item.url}
              onClick={() => handleItemClick(item.url)}
            />
          ))
        }
      </nav>
    </div>
  </>
}

export default Sidebar;