fix

src/components/profile/SpecializationSection.tsx

@@ -2,90 +2,80 @@
 
 import Image from 'next/image';
 import { SpecializationCard } from './SpecializationCard';
-
-interface SpecializationData {
-  types: string[];
-  loanTypes: string[];
-  propertyTypes: string[];
-  hobbies: string[];
-  pricePoints: string[];
-}
+import { SpecializationFieldsData } from '@/utils/profileDataMapper';
 
 interface SpecializationSectionProps {
-  specialization: SpecializationData;
+  fieldsData: SpecializationFieldsData;
 }
 
-export function SpecializationSection({ specialization }: SpecializationSectionProps) {
+export function SpecializationSection({ fieldsData }: SpecializationSectionProps) {
+  const { fields } = fieldsData;
+
+  // Don't render if no fields with data
+  if (!fields || fields.length === 0) {
+    return null;
+  }
+
+  // Split fields for layout: first 3 in top row, rest in bottom row
+  const topRowFields = fields.slice(0, 3);
+  const bottomRowFields = fields.slice(3);
+
   return (
     <div className="bg-[#e8e8e8] rounded-[20px] p-8">
       <div className="text-center mb-8">
         <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px]">Specialization</h2>
         <p className="text-[14px] font-medium text-[#00293D] font-fractul leading-[17px]">Area Of Expertise and Focus</p>
       </div>
-      <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6 mb-6">
-        <SpecializationCard
-          title="Specialization"
-          items={specialization.types}
-          icon={
-            <Image
-              src="/assets/icons/home-icon.svg"
-              alt="Specialization"
-              width={24}
-              height={24}
+
+      {/* Top row - up to 3 cards */}
+      {topRowFields.length > 0 && (
+        <div className={`flex flex-col lg:grid gap-6 mb-6 ${
+          topRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
+          topRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
+          'lg:grid-cols-3'
+        }`}>
+          {topRowFields.map((field) => (
+            <SpecializationCard
+              key={field.fieldSlug}
+              title={field.fieldName}
+              items={field.values}
+              icon={
+                <Image
+                  src={field.icon || '/assets/icons/home-icon.svg'}
+                  alt={field.fieldName}
+                  width={24}
+                  height={24}
+                />
+              }
             />
-          }
-        />
-        <SpecializationCard
-          title="Loan Type"
-          items={specialization.loanTypes}
-          icon={
-            <Image
-              src="/assets/icons/wallet-icon.svg"
-              alt="Loan Type"
-              width={24}
-              height={24}
+          ))}
+        </div>
+      )}
+
+      {/* Bottom row - remaining cards */}
+      {bottomRowFields.length > 0 && (
+        <div className={`flex flex-col lg:grid gap-6 ${
+          bottomRowFields.length === 1 ? 'lg:grid-cols-1 lg:max-w-md lg:mx-auto' :
+          bottomRowFields.length === 2 ? 'lg:grid-cols-2 lg:max-w-2xl lg:mx-auto' :
+          'lg:grid-cols-3'
+        }`}>
+          {bottomRowFields.map((field) => (
+            <SpecializationCard
+              key={field.fieldSlug}
+              title={field.fieldName}
+              items={field.values}
+              icon={
+                <Image
+                  src={field.icon || '/assets/icons/home-icon.svg'}
+                  alt={field.fieldName}
+                  width={24}
+                  height={24}
+                />
+              }
             />
-          }
-        />
-        <SpecializationCard
-          title="Property Type"
-          items={specialization.propertyTypes}
-          icon={
-            <Image
-              src="/assets/icons/chart-icon.svg"
-              alt="Property Type"
-              width={24}
-              height={24}
-            />
-          }
-        />
-      </div>
-      <div className="flex flex-col lg:grid lg:grid-cols-2 gap-6 lg:max-w-2xl lg:mx-auto">
-        <SpecializationCard
-          title="Hobbies & Interests"
-          items={specialization.hobbies}
-          icon={
-            <Image
-              src="/assets/icons/heart-icon.svg"
-              alt="Hobbies"
-              width={24}
-              height={24}
-            />
-          }
-        />
-        <SpecializationCard
-          title="Price Point"
-          items={specialization.pricePoints}
-          icon={
-            <Image
-              src="/assets/icons/wallet-icon.svg"
-              alt="Price Point"
-              width={24}
-              height={24}
-            />
-          }
-        />
-      </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }