"use client";

import Image from "next/image";
import { usePathname } from "next/navigation";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";


const links = [
  {
    icon: "/home-icon.png",
    label: "Home",
    path: "/"
  },
  {
    icon: "/design-icon.png",
    label: "Design St.",
    path: "/design"
  }
];


export default function Sidebar() {
  const pathname = usePathname();
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <div className={`bg-[#050616] w-full md:w-[80px] h-auto md:h-screen transition-all duration-300 ease-in-out ${isMenuOpen ? 'md:w-[200px]' : ''}`}>
      <div className="flex md:flex-col items-center justify-center gap-4 p-4 md:pt-10">
        {/* Menu Icon */}
        <div className="flex md:flex-col items-center gap-4 md:gap-6">
          <Button
            variant="ghost"
            size="icon"
            className="mb-5 hover:bg-[#1a1c2b]/50"
            onClick={() => setIsMenuOpen(!isMenuOpen)}
          >
            <Menu className="h-6 w-6 text-white" />
          </Button>
          
          {/* Navigation Links */}
          {links.map((link) => (
            <div 
              key={link.path} 
              className={`flex flex-col items-center cursor-pointer group`}
            >
              <Button
                variant="ghost"
                size="icon"
                className={`p-2 rounded-lg transition-colors duration-200 ${
                  pathname === link.path ? 'bg-[#1a1c2b]' : 'group-hover:bg-[#1a1c2b]/50'
                }`}
              >
                <Image 
                  src={link.icon} 
                  alt={link.label} 
                  width={24} 
                  height={24} 
                  className="group-hover:opacity-80 transition-opacity duration-200"
                  priority={link.path === "/"} // Prioritize loading home icon
                />
              </Button>
              
              {/* Link Label */}
              <p className={`text-white text-xs mt-1 transition-all duration-300 ease-in-out ${
                isMenuOpen ? 'opacity-100 translate-x-0' : 'opacity-0 translate-x-4'
              } group-hover:opacity-80`}>
                {link.label}
              </p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}