'use client';

import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { NavLink } from '@/types';
import { HTMLAttributes, useState } from 'react';
import { cn } from '@/utils';
import { CaretRightIcon } from '@/components/icons';

interface SidebarListProps extends HTMLAttributes<HTMLDivElement> {
  heading: string;
  list: NavLink[];
  setIsOpenSidebar: (isOpen: boolean) => void;
}

export const SidebarList = ({
  heading,
  list,
  className,
  setIsOpenSidebar,
}: SidebarListProps) => {
  const pathname = usePathname();
  const [accordionOpen, setAccordionOpen] = useState<boolean>(true);

  const toggleAccordion = () => {
    setAccordionOpen((prev) => !prev);
  };

  return (
    <div className={cn(className)}>
      <button
        onClick={toggleAccordion}
        className="uppercase bg-accent text-background font-bold text-sm tracking-widest w-fit px-[7px] py-[2px]"
      >
        {heading}
      </button>
      <div
        className={`grid overflow-hidden mb-[30px] xs:max-lg:mb-0 lg:mb-[30px] ma transition-all duration-500 ease-in-out ${
          accordionOpen
            ? 'grid-rows-[1fr] opacity-100 mt-5'
            : 'grid-rows-[0fr] opacity-0 mt-0'
        }`}
      >
        <ul className="flex flex-col gap-2 overflow-hidden">
          {list.map(({ id, title, link }) => {
            const isActive = link === pathname;
            return (
              <li key={id}>
                <Link
                  target={
                    heading !== 'More Info'
                      ? heading !== 'Links'
                        ? heading !== 'Menu'
                          ? '_blank'
                          : '_self'
                        : '_self'
                      : '_self'
                  }
                  href={link}
                  className={`flex items-center gap-1 w-fit text-[12px] tracking-normal font-semibold uppercase ${
                    isActive ? 'text-accent' : 'text-foreground'
                  } hover:text-accent transition-all duration-300 ease-in-out`}
                  onClick={() => setIsOpenSidebar(false)}
                >
                  <CaretRightIcon className="min-w-3 h-3" />
                  <span>{title}</span>
                </Link>
              </li>
            );
          })}
        </ul>
      </div>
    </div>
  );
};