frontend/src/components/profile/SpecializationSection.tsx

'use client';

import Image from 'next/image';
import { SpecializationCard } from './SpecializationCard';

interface SpecializationData {
  types: string[];
  loanTypes: string[];
  propertyTypes: string[];
  hobbies: string[];
  pricePoints: string[];
}

interface SpecializationSectionProps {
  specialization: SpecializationData;
}

export function SpecializationSection({ specialization }: SpecializationSectionProps) {
  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}
            />
          }
        />
        <SpecializationCard
          title="Loan Type"
          items={specialization.loanTypes}
          icon={
            <Image
              src="/assets/icons/wallet-icon.svg"
              alt="Loan Type"
              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>
  );
}