feat: fetch and render dynamic agent types in footer service providers list

src/components/layout/Footer.tsx

@@ -1,16 +1,11 @@
 'use client';
 
+import { useEffect, useState } from 'react';
 import Link from 'next/link';
 import Image from 'next/image';
+import { agentsService, type AgentType } from '@/services/agents.service';
 
 const footerLinks = {
-  serviceProviders: {
-    title: 'Service Providers',
-    links: [
-      { label: 'Agent', href: '/user/profiles?listing=agents' },
-      { label: 'Lenders', href: '/user/profiles?listing=lenders' },
-    ],
-  },
   resources: {
     title: 'Resources',
     links: [
@@ -76,6 +71,12 @@ const socialLinks = [
 ];
 
 export function Footer() {
+  const [agentTypes, setAgentTypes] = useState<AgentType[]>([]);
+
+  useEffect(() => {
+    agentsService.getAgentTypes().then(setAgentTypes).catch(() => {});
+  }, []);
+
   return (
     <footer className="bg-[#648188] text-[#00293d]">
       {/* Main Footer Content */}
@@ -84,17 +85,17 @@ export function Footer() {
           {/* Service Providers */}
           <div>
             <h3 className="font-serif font-bold text-[14px] leading-[19px] text-[#E58625] mb-4 pb-2 border-b-2 border-[#e58625] inline-block">
-              {footerLinks.serviceProviders.title}
+              Service Providers
             </h3>
             <ul className="space-y-3">
-              {footerLinks.serviceProviders.links.map((link) => (
-                <li key={link.label}>
+              {agentTypes.map((type) => (
+                <li key={type.id}>
                   <Link
-                    href={link.href}
+                    href={`/user/profiles?type=${type.id}`}
                     prefetch={false}
                     className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] hover:text-[#e58625] transition-colors"
                   >
-                    {link.label}
+                    {type.name}
                   </Link>
                 </li>
               ))}