"use client";

import Image from "next/image";
import { usePathname } from "next/navigation";

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

/**
 * Sidebar Component
 * Displays a vertical navigation sidebar with icons and labels
 */
export default function Sidebar() {
  const pathname = usePathname();

  return (
    <div className="bg-[#050616] w-full md:w-[80px] h-auto md:h-screen">
      <div className="flex md:flex-col items-center justify-between md:justify-start gap-4 p-4 md:pt-10">
        {/* Menu Icon */}
        <Image 
          src="/menu-icon.png" 
          alt="logo" 
          width={24} 
          height={24} 
          className="cursor-pointer" 
        />
        
        {/* Navigation Links */}
        <div className="flex md:flex-col items-center md:items-start gap-4 md:gap-6 md:mt-10 w-full md:w-auto px-4">
          {links.map((link) => (
            <div key={link.path} className="flex flex-col items-center md:items-start w-auto">
              {/* Link Icon Container */}
              <div className={`p-2 rounded-lg ${pathname === link.path ? 'bg-[#1a1c2b]' : ''}`}>
                <Image 
                  src={link.icon} 
                  alt={link.label} 
                  width={24} 
                  height={24} 
                  className="cursor-pointer" 
                />
              </div>
              
              {/* Link Label */}
              <p className="text-white text-xs mt-1 hidden md:block">{link.label}</p>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}