export type Service = {
  serviceTitle?: string;
  serviceDescription?: string;
  serviceIcon?: string | null; // SVG string
};

type Props = {
  service: Service;
};

export default function ServiceCard({ service }: Props) {
  return (
    <div
      className="h-full w-full
        rounded-2xl p-6
        bg-white text-[#202020]
        transition-all duration-300
        hover:bg-[#101010] hover:text-white
        border border-[#202020]/15
        group
      "
    >
      {/* ICON (SVG STRING) */}
      {service.serviceIcon && (
        <div
          className="service-icon mb-4 h-12 text-[#202020]/50 group-hover:text-white flex w-auto justify-end mr-0"
          dangerouslySetInnerHTML={{
            __html: service.serviceIcon,
          }}
        />
      )}

      {/* TITLE */}
      {service.serviceTitle && (
        <h3
          className="text-2xl lg:text-2xl font-mono font-medium mb-2 text-[#202020] group-hover:text-white"
          dangerouslySetInnerHTML={{
            __html: service.serviceTitle,
          }}
        />
      )}

      {/* DESCRIPTION */}
      {service.serviceDescription && (
        <div
          className="text-[16px] lg:text-lg font-medium text-[#202020]/70 group-hover:text-white/70"
          dangerouslySetInnerHTML={{
            __html: service.serviceDescription,
          }}
        />
      )}
    </div>
  );
}