frontend/src/app/(agent)/agent/settings/component/SettingsSidebar.tsx

'use client';

import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';

interface NavItem {
  label: string;
  href: string;
  icon: string;
}

const navItems: NavItem[] = [
  {
    label: 'Profile Settings',
    href: '/agent/settings',
    icon: '/assets/icons/settings-profile-icon.svg',
  },
  {
    label: 'Password Security',
    href: '/agent/settings/password',
    icon: '/assets/icons/settings-lock-icon.svg',
  },
  {
    label: 'Notifications',
    href: '/agent/settings/notifications',
    icon: '/assets/icons/settings-bell-icon.svg',
  },
  {
    label: 'Privacy',
    href: '/agent/settings/privacy',
    icon: '/assets/icons/settings-privacy-icon.svg',
  },
];

interface SettingsSidebarProps {
  profileImage?: string;
  name?: string;
  title?: string;
}

export function SettingsSidebar({
  profileImage = '/assets/icons/user-placeholder-icon.svg',
  name = 'Brain Nooland',
  title = 'Top Real Estate Agent',
}: SettingsSidebarProps) {
  const pathname = usePathname();

  return (
    <div className="w-full lg:w-[280px] bg-white rounded-[15px] border border-[#00293d]/10 overflow-hidden h-fit">
      {/* Profile Section */}
      <div className="p-6 flex flex-col items-center">
        <div className="w-[80px] h-[80px] rounded-full overflow-hidden mb-3 border-2 border-[#e58625]">
          <Image
            src={profileImage}
            alt={name}
            width={80}
            height={80}
            className="w-full h-full object-cover"
          />
        </div>
        <h3 className="font-fractul font-bold text-[16px] leading-[19px] text-[#00293D]">
          {name}
        </h3>
        <p className="font-serif font-normal text-[12px] leading-[16px] text-[#00293D]/70 mt-1">
          {title}
        </p>
      </div>

      {/* Divider */}
      <div className="w-full h-[1px] bg-[#00293d]/10" />

      {/* Categories Section */}
      <div className="p-4">
        {/* Categories Header */}
        <div className="flex items-center justify-between mb-4 px-2">
          <h4 className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D]">
            Categories
          </h4>
          <Image
            src="/assets/icons/chevron-right-icon.svg"
            alt="Expand"
            width={8}
            height={14}
          />
        </div>

        {/* Navigation Items */}
        <nav className="space-y-1">
          {navItems.map((item) => {
            const isActive = pathname === item.href;
            return (
              <Link
                key={item.href}
                href={item.href}
                className={`flex items-center gap-3 py-3 px-3 rounded-[10px] transition-colors cursor-pointer ${
                  isActive
                    ? 'bg-[#e58625]/10'
                    : 'hover:bg-[#00293d]/5'
                }`}
              >
                <div
                  className={`w-5 h-5 flex items-center justify-center ${
                    isActive ? 'text-[#e58625]' : 'text-[#00293D]'
                  }`}
                  style={{ color: isActive ? '#e58625' : '#00293D' }}
                >
                  <Image
                    src={item.icon}
                    alt={item.label}
                    width={20}
                    height={20}
                    className={isActive ? 'brightness-0 saturate-100' : ''}
                    style={isActive ? { filter: 'invert(48%) sepia(94%) saturate(1000%) hue-rotate(360deg) brightness(95%) contrast(85%)' } : {}}
                  />
                </div>
                <span
                  className={`font-serif text-[14px] leading-[19px] ${
                    isActive
                      ? 'font-medium text-[#e58625]'
                      : 'font-normal text-[#00293D]'
                  }`}
                >
                  {item.label}
                </span>
              </Link>
            );
          })}
        </nav>
      </div>
    </div>
  );
}