"use client";
import { useState } from "react";
import Link from "next/link";
import { SitemapNode as NodeType } from "@/app/components/sitemap/sitemapProps";

type Props = {
  node: NodeType;
};

export default function SitemapNode({ node }: Props) {
  const [expanded, setExpanded] = useState(false);
  const hasChildren = node.children && node.children.length > 0;

  return (
    <div className="my-2 flex w-full flex-col items-start bg-white align-top px-8 py-4">
      <div
        className="flex w-full cursor-pointer flex-row items-center justify-between bg-white"
        onClick={() => hasChildren && setExpanded((prev) => !prev)}
      >
        <Link
          href={node.slug}
          id={`sm_${node.id}`}
          className="font-bogart text-xl/4 hover:underline flex p-1"
        >
          {node.title}
        </Link>
        {hasChildren && (
          <div className="flex w-[10%] items-end justify-end py-2">
            {expanded ? <span>Hide</span> : <span>Show</span>}
          </div>
        )}
      </div>

      {hasChildren && expanded && (
        <div className="ml-[5%] flex w-[80%] flex-col border-l-2 border-dashed border-gray-300 pl-3">
          {node.children!.map((child) => (
            <SitemapNode key={child.slug} node={child} />
          ))}
        </div>
      )}
    </div>
  );
}