'use client';

import { Tag } from './Tag';

interface ExperienceData {
  years: string;
  contracts: string;
  licensingAreas: string[];
  expertiseYears: { area: string; years: string }[];
  certifications: { name: string; org: string }[];
}

interface ExperienceSectionProps {
  experience: ExperienceData;
}

export function ExperienceSection({ experience }: ExperienceSectionProps) {
  return (
    <div className="bg-white rounded-[20px] p-4 lg:p-5">
      <h2 className="text-[20px] font-bold text-[#00293D] font-fractul leading-[24px] mb-4 text-center lg:text-left">Experience</h2>
      <div className="flex flex-col lg:flex-row gap-4 lg:gap-8">
        {/* Left Column */}
        <div className="flex-1 space-y-4">
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Years in Experience</p>
            <ul className="list-disc list-inside">
              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">{experience.years}</li>
            </ul>
          </div>
          {/* Horizontal divider */}
          <div className="w-full h-0 border-t-[0.5px] border-solid border-[#00293D]/20" />
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-2">Number of contract closed</p>
            <ul className="list-disc list-inside">
              <li className="font-serif font-medium text-[15px] leading-[21px] text-[#00293D]">{experience.contracts}</li>
            </ul>
          </div>
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Licensing &amp; Areas</p>
            <div className="flex flex-wrap gap-2">
              {experience.licensingAreas.map((area, idx) => (
                <Tag key={idx} variant="light">
                  {area}
                </Tag>
              ))}
              <span className="inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer">+3 More</span>
            </div>
          </div>
        </div>

        {/* Divider - Hidden on mobile, visible on desktop */}
        <div className="hidden lg:block w-px bg-gray-200" />
        <div className="lg:hidden border-t border-gray-200" />

        {/* Right Column */}
        <div className="flex-1 space-y-4">
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Areas in expertise &amp; Years</p>
            <div className="flex flex-wrap gap-2">
              {experience.expertiseYears.slice(0, 4).map((item, idx) => (
                <Tag key={idx} variant="light">
                  {item.area} – {item.years}
                </Tag>
              ))}
              <span className="inline-flex items-center justify-center h-[28px] px-3 rounded-[15px] border border-[#00293d]/10 text-[15px] font-light font-serif text-[#00293d] cursor-pointer">+3 More</span>
            </div>
          </div>
          <div>
            <p className="font-fractul font-bold text-[14px] leading-[17px] text-[#00293D] mb-3">Certifications</p>
            <ul className="space-y-3">
              {experience.certifications.map((cert, idx) => (
                <li key={idx}>
                  <span className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D]">• {cert.name}</span>
                  <p className="font-serif font-normal text-[14px] leading-[19px] text-[#00293D] opacity-50 ml-3">{cert.org}</p>
                </li>
              ))}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}
