export type Service = {
  serviceTitle?: string;
  serviceDescription?: string;
  serviceIcon?: string | null;
  serviceTags?: {
    tag1?: string | null;
    tag2?: string | null;
    tag3?: string | null;
    tag4?: string | null;
  };
};

type Props = {
  service: Service;
};

export default function ServiceCard({ service }: Props) {
  const tags = Object.values(service.serviceTags || {}).filter(
    (tag): tag is string =>
      typeof tag === "string" &&
      tag.trim() !== "" &&
      tag.length < 50 && // avoid long field keys
      !tag.match(/ContentCreativeServices/i)
  );

  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 flex flex-col
      "
    >
      <div>
        {/* ICON */}
        {service.serviceIcon && (
          <div
            className="mb-4 h-12 text-[#202020]/50 group-hover:text-white flex justify-end"
            dangerouslySetInnerHTML={{
              __html: service.serviceIcon,
            }}
          />
        )}

        {/* TITLE */}
        {service.serviceTitle && (
          <h3
            className="text-xl md:text-2xl font-mono font-medium mb-3"
            dangerouslySetInnerHTML={{
              __html: service.serviceTitle,
            }}
          />
        )}

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

      {/* TAGS (BOTTOM LIKE YOUR IMAGE) */}
      {tags.length > 0 && (
        <div className="flex flex-wrap gap-2 mt-5">
          {tags.map((tag, i) => (
            <span
              key={i}
              className="
                px-[10] py-[10] rounded-full text-xs md:text-sm font-medium
                bg-[#202020]/10
                border border-[#202020]/50
                text-[#202020]/70
                group-hover:text-white/70
                group-hover:border-white/50
                group-hover:bg-[#ffffff]/10
              "
            >
              {tag}
            </span>
          ))}
        </div>
      )}
    </div>
  );
}