"use client";

import { useState } from "react";
import Link from "next/link";
import { ChevronRight } from "lucide-react";
import { usePathname } from "next/navigation";

interface SidebarItemProps {
  label: string;
  icon?: React.ReactNode;
  children?: React.ReactNode;
  path?: string;
}

export default function SidebarItem({
  label,
  icon,
  children,
  path,
}: SidebarItemProps) {
  const [open, setOpen] = useState(false);
  const pathname = usePathname();
  const hasChildren = !!children;

  const isActive = path && pathname === path;

  return (
    <div>
      <div
        className={`
          flex items-center justify-between w-full px-4 py-2 cursor-pointer 
          hover:bg-primary-700 transition rounded-lg
        `}
        onClick={() => hasChildren && setOpen(!open)}
      >
        <span className="flex items-center space-x-3">
          {icon}

          {path ? (
            <Link
              href={path}
              className={`block ${
                isActive ? "text-primary-300 font-semibold" : ""
              }`}
            >
              {label}
            </Link>
          ) : (
            <span>{label}</span>
          )}
        </span>

        {hasChildren && (
          <ChevronRight
            className={`w-4 h-4 transition-transform ${
              open ? "rotate-90" : ""
            }`}
          />
        )}
      </div>

      {open && (
        <div className="ml-8 mt-1 space-y-1 border-[#F5C249] border-l-2 py-1">
          {children}
        </div>
      )}
    </div>
  );
}