'use client';

import { useState } from 'react';
import Image from 'next/image';

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

export function SpecializationCard({
  title,
  items,
  icon,
  initialItemsToShow = 3
}: SpecializationCardProps) {
  const [isExpanded, setIsExpanded] = useState(false);

  // Determine if we need to show the toggle button
  const hasMoreItems = items.length > initialItemsToShow;

  // Get the items to display based on expanded state
  const displayedItems = isExpanded ? items : items.slice(0, initialItemsToShow);

  const handleToggle = () => {
    setIsExpanded(!isExpanded);
  };

  return (
    <div className="bg-white rounded-[20px] p-6 text-center flex flex-col border-[0.7px] border-[#E58625] min-h-[200px]">
      <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">
        {displayedItems.map((item, idx) => (
          <p key={idx} className="text-[#00293D] text-[14px] leading-[25px] font-normal font-serif text-center">
            {item}
          </p>
        ))}
      </div>
      {hasMoreItems && (
        <div className="mt-4 flex justify-center">
          <button
            onClick={handleToggle}
            className="inline-flex items-center justify-center gap-1 h-[20px] px-3 border border-[#e58625] rounded-[20px] text-[#e58625] text-[10px] leading-[22px] font-bold font-serif hover:bg-[#e58625]/5 transition-colors cursor-pointer"
          >
            {isExpanded ? 'Show Less' : 'Show More'}
            <Image
              src="/assets/icons/chevron-down-icon.svg"
              alt={isExpanded ? 'Show less' : 'Show more'}
              width={10}
              height={10}
              className={`transition-transform duration-200 ${isExpanded ? 'rotate-180' : ''}`}
            />
          </button>
        </div>
      )}
    </div>
  );
}