import { useState } from "react";
import { ChevronDown, ChevronUp, FileText, Link} from "lucide-react";
import {  DropdownProps, MenuItem } from "../DropdownItems";


const DocDropdown: React.FC<DropdownProps> = ({ title}) => {
  const [open, setOpen] = useState(false);

  const DocumentItems: MenuItem[] = [
    { title: 'Danh mục văn bản', path: '/van-ban/danh-muc-van-ban' },
    { title: 'Văn bản đi', path: '/van-ban/van-ban-di' },
    { title: 'Văn bản đến', path: '/van-ban/van-ban-den' },
    { title: 'Thông báo', path: '/van-ban/thong-bao' },
  ];

//   const fetchEmployees = async () => {
        
//       try {
//         // await fetch("http://localhost:4002/reset", {
//         //   method: "GET",
//         // });
//         const response = await fetch("http://localhost:4004/employees", {
//           method: "GET",
//         });

//         if (!response.ok) {
//           throw new Error(`HTTP error! status: ${response.status}`);
//         }

//         const data = await response.json();
//         setData(Object.values(data.record));
//       } catch (error) {
//         console.error("Failed to fetch alerts:", error);
//     }
//   };
  
  return (
    <div className="mb-4">
      <button
        onClick={() => setOpen(prev => !prev)}
        className="flex items-center justify-between w-full py-2 px-3 hover:bg-white/20 rounded text-white"
      >
        <div className="flex items-center space-x-2">
          {<FileText size={20} />}
          <span className="font-medium">{title}</span>
        </div>
        {open ? <ChevronDown /> : <ChevronUp />}
      </button>
      {open && (
        <ul className="mt-2 space-y-1 pl-8">
          {DocumentItems.map(item => (
            <li key={item.title}>
              <Link to={item.path ?? '#'} className="block py-1 hover:underline text-white">
                {item.title}

              </Link>
            </li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default DocDropdown;