"use client";

import Link from "next/link";
import { useState } from "react";
import { ChevronDown } from "lucide-react";
import {Props} from "@/constants/types";
import Button  from "@/utils/button";

export default function SidebarItem({ item }: Props) {
  const [open, setOpen] = useState(item.title === "Overview");

  return (
    <div className=" border-b border-slate-800 ">
      <Button
        onClick={() => setOpen(!open)}
        className="flex w-full items-center justify-between px-5 py-4 hover:bg-slate-900"
      >
        <div className="flex items-center gap-3">
          <item.icon size={20} />

          <span className="font-medium">{item.title}</span>
        </div>

        <ChevronDown
          size={18}
          className={`transition-transform ${
            open ? "rotate-180" : ""
          }`}
        />
      </Button>

      {open && item.children.length > 0 && (
        <div className="ml-6 border-l border-slate-700 pl-4 pb-2">
          {item.children.map((child: any) => (
            <Link
              key={child.title}
              href={child.href}
              className="group mt-2 flex items-center gap-3 rounded-lg px-3 py-2 text-slate-300 hover:bg-teal-500/20 hover:text-teal-400"
            >
              <child.icon size={18} />

              <span>{child.title}</span>
            </Link>
          ))}
        </div>
      )}
    </div>
  );
}