import React from 'react';

interface ServiceCardProps {
  icon?: React.ReactNode; 
  title: string;
  description?: string;
  list?: string[];
  className?: string;
  ordered?: boolean;
  action?: React.ReactNode;
}

const ServiceCard: React.FC<ServiceCardProps> = ({
  icon,
  title,
  description,
  list,
  className = "",
  ordered = false,
  action
}) => {
  const showIconBox = className.includes("bg-[#F7FAF8]");

  return (
    <div
      className={`font-outfit p-[15px] rounded-[20px]
      border border-[#053F31]/10
      hover:border-[#053F31] hover:border-b-[3px]
      transition-all duration-200 h-full flex flex-col ${className}`}
    >
      <div className="flex flex-row space-x-2.5 items-center">
      <div className="mb-[5px]">
        {showIconBox ? (
          <div className="inline-flex items-center bg-[#D6E6DE] border border-[#053F31]/20 rounded-[16px] text-[#053F31]">
            {icon}
          </div>
        ) : (
          icon
        )}
      </div>

      <h4 className="font-bold text-black mb-[10px] ">
        {title}
      </h4>
      </div>

      {description &&
          <div
            className="text-[#757575] leading-relaxed font-light mb-[10px]"
            dangerouslySetInnerHTML={{ __html: description }}
          />
        }

      {list && (
        ordered ? (
          <ol className="md:space-y-[10px] list-decimal list-inside mt-[20px]">
            {list.map((item, index) => (
              <li key={index} className="font-light text-[#757575] mb-[10px]">
                {item}
              </li>
            ))}
          </ol>
        ) : (
          <ul className="md:space-y-[12px]">
            {list.map((item, index) => (
              <li key={index} className="flex items-start font-light text-[#757575] mb-[5px]">
                <span className="mr-3 font-bold ">•</span>
                {typeof item === "string" && item.includes("<") ? (
                  <span dangerouslySetInnerHTML={{ __html: item }} />
                ) : (
                  item
                )}
              </li>
            ))}
          </ul>
        )
      )}
      {action && <div className="mt-[10px]">{action}</div>}
    </div>
  );
};

export default ServiceCard;