core/apps/webapp/app/components/integrations/integration-card.tsx

import React from "react";
import { Link } from "@remix-run/react";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "~/components/ui/card";
import { getIcon, type IconType } from "~/components/icon-utils";
import { Badge } from "../ui/badge";

interface IntegrationCardProps {
  integration: {
    id: string;
    name: string;
    description?: string;
    icon: string;
    slug?: string;
  };
  isConnected: boolean;
}

export function IntegrationCard({
  integration,
  isConnected,
}: IntegrationCardProps) {
  const Component = getIcon(integration.icon as IconType);

  return (
    <Link
      to={`/home/integration/${integration.slug || integration.id}`}
      className="bg-background-3 h-full rounded-lg"
    >
      <Card className="transition-all">
        <CardHeader className="p-4">
          <div className="bg-background-2 mb-2 flex h-6 w-6 items-center justify-center rounded">
            <Component size={18} />
          </div>
          <CardTitle className="text-base">{integration.name}</CardTitle>
          <CardDescription className="line-clamp-2 text-xs">
            {integration.description || `Connect to ${integration.name}`}
          </CardDescription>
        </CardHeader>
        {isConnected && (
          <CardFooter className="p-3">
            <div className="flex w-full items-center justify-end">
              <Badge className="h-6 rounded bg-green-100 p-2 text-xs text-green-800">
                Connected
              </Badge>
            </div>
          </CardFooter>
        )}
      </Card>
    </Link>
  );
}