prowler/ui/components/services/ServiceCard.tsx

import { Badge, Card, CardContent } from "@/components/shadcn";

import { getAWSIcon, NotificationIcon, SuccessIcon } from "../icons";

interface CardServiceProps {
  fidingsFailed: number;
  serviceAlias: string;
}
export const ServiceCard: React.FC<CardServiceProps> = ({
  fidingsFailed,
  serviceAlias,
}) => {
  return (
    <Card
      role="button"
      tabIndex={0}
      className="bg-bg-neutral-secondary hover:bg-bg-neutral-tertiary w-full cursor-pointer gap-0 shadow-sm transition-colors"
    >
      <CardContent className="flex flex-row items-center justify-between gap-4 p-3">
        <div className="flex items-center gap-4">
          {getAWSIcon(serviceAlias)}
          <div className="flex flex-col">
            <h4 className="text-md leading-5 font-bold">{serviceAlias}</h4>
            <small className="text-text-neutral-tertiary">
              {fidingsFailed > 0
                ? `${fidingsFailed} Failed Findings`
                : "No failed findings"}
            </small>
          </div>
        </div>

        <Badge
          className="h-10 [&>svg]:size-[18px]"
          variant={fidingsFailed > 0 ? "error" : "success"}
        >
          {fidingsFailed > 0 ? (
            <NotificationIcon size={18} />
          ) : (
            <SuccessIcon size={18} />
          )}
          {fidingsFailed > 0 ? fidingsFailed : ""}
        </Badge>
      </CardContent>
    </Card>
  );
};