agent-platform/web/src/pages/workflows/components/WorkflowCard.tsx

import { ArrowRight, GitBranch } from "lucide-react";
import { Link } from "react-router-dom";
import { StatusBadge } from "@/components/shared/StatusBadge";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import type { WorkflowDefinition } from "@/types";

export function WorkflowCard({ workflow }: { workflow: WorkflowDefinition }) {
  return (
    <Card>
      <CardHeader>
        <div className="flex items-start justify-between gap-3">
          <div className="grid h-10 w-10 place-items-center rounded-md bg-primary/15 text-primary">
            <GitBranch className="h-5 w-5" />
          </div>
          <StatusBadge status={workflow.latest_version_no > 0 ? "active" : "draft"} />
        </div>
        <CardTitle className="truncate">{workflow.name}</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-2 text-sm text-muted-foreground">
          <p>{workflow.workflow_type}</p>
          <p>{workflow.latest_version_no} versions</p>
        </div>
        <Link
          to={`/workflows/${workflow.id}/editor`}
          className="mt-5 inline-flex h-10 w-full items-center justify-center gap-2 rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground hover:bg-primary/90"
        >
          Edit <ArrowRight className="h-4 w-4" />
        </Link>
      </CardContent>
    </Card>
  );
}