since3-portal/modules/shared/ui/components/service-logo.tsx

"use client"

import { useState } from "react";
import Image from "next/image";
import { ServerIcon } from "lucide-react";
import { getServiceById } from "@/modules/shared/data/services-data";

export function ServiceLogo({
    serviceId,
    size = 20,
    className,
}: {
    serviceId: string;
    size?: number;
    className?: string;
}) {
    const service = getServiceById(serviceId);
    const [failed, setFailed] = useState(false);

    if (!service.logo || failed) {
        return <ServerIcon className={className ?? "size-4.5 text-muted-foreground"} />;
    }

    return (
        <Image
            src={service.logo}
            alt={service.label}
            width={size}
            height={size}
            className={className ?? "object-contain"}
            style={{ width: size, height: size }}
            onError={() => setFailed(true)}
        />
    );
}