'use client';

import Image from 'next/image';

interface SpecializationCardProps {
  title: string;
  items: string[];
  icon: React.ReactNode;
}

export function SpecializationCard({ title, items, icon }: SpecializationCardProps) {
  return (
    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col h-full border-[0.7px] border-[#E58625]">
      <div className="flex justify-center mb-3">{icon}</div>
      <h4 className="font-bold text-[#00293D] text-[14px] leading-[17px] mb-4 font-fractul">{title}</h4>
      <div className="flex-1">
        {items.map((item, idx) => (
          <p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
            {item}
          </p>
        ))}
      </div>
      <div className="mt-4 flex justify-center">
        <button className="inline-flex items-center justify-center gap-1 h-[20px] w-[87px] border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors">
          Show More
          <Image
            src="/assets/icons/chevron-down-icon.svg"
            alt="Show more"
            width={10}
            height={10}
          />
        </button>
      </div>
    </div>
  );
}