"use client";

import React, { useState } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
import Link from "next/link";
import { usePathname } from "next/navigation";

const paths = [
  { href: "/dashboard", label: "Home" },
  { href: "/dashboard/positions", label: "Positions" },
];

export type LayoutProps = Readonly<{
  children: React.ReactNode;
}>;

export default function Layout({ children }: LayoutProps) {
  const [isOpen, setIsOpen] = useState(true);
  const path = usePathname();

  return (
    <div className="flex h-screen bg-gray-100">
      {/* Sidebar */}
      <div
        className={`relative text-black space-y-6 py-7 px-2 transition-all duration-500 ease-in-out ${isOpen ? "w-64" : "w-12 overflow-hidden"}`}>
        {/* Sidebar content */}
        <nav className={isOpen ? "" : "hidden"}>
          {paths.map(({ href, label }) => (
            <Link key={href} href={href}
                  className={`block py-2.5 px-4 mb-2 rounded transition duration-200 ${href == path ? "bg-blue-200" : "hover:bg-blue-200"}`}>
              {label}
            </Link>
          ))}
        </nav>
        {/* Toggle button */}
        <div className="absolute bottom-2 right-0 p-2">
          <button onClick={() => setIsOpen(!isOpen)}
                  className="text-gray-700 focus:outline-none transition-transform duration-500 transform"
                  style={{ transform: isOpen ? "rotate(180deg)" : "rotate(0)" }}
          >
            <FontAwesomeIcon icon={faArrowRight} size="2x" />
          </button>
        </div>
      </div>

      {/* Main content */}
      <div className="flex-1 flex flex-col overflow-hidden">
        <main className="flex-1 overflow-y-auto p-4">
          {children}
        </main>
      </div>
    </div>
  );
}