'use client';

import Image from 'next/image';
import { SpecializationCard } from './SpecializationCard';
import { SpecializationFieldsData } from '@/utils/profileDataMapper';

interface SpecializationSectionProps {
  fieldsData: SpecializationFieldsData;
}

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>

      {/* Top row - up to 3 cards */}
      {topRowFields.length > 0 && (
        <div className={`flex flex-col lg:grid lg:items-start 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}
                />
              }
            />
          ))}
        </div>
      )}

      {/* Bottom row - remaining cards */}
      {bottomRowFields.length > 0 && (
        <div className={`flex flex-col lg:grid lg:items-start 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}
                />
              }
            />
          ))}
        </div>
      )}
    </div>
  );
}