import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from "../lib/utils";
import { AgentProfileIcon } from "./AgentProfileIcon";
/**
 * Card for a single agent profile in the "Choose your sidekick" gallery.
 */
export function AgentGalleryCard({ profile, onSelect, layout = "grid", }) {
    const displayTitle = profile.displayTitle || profile.name;
    const description = profile.description || "";
    return (_jsxs("button", { type: "button", onClick: () => onSelect(profile), className: cn("group border-border-default hover:border-neutral-grey-50/40 relative flex cursor-pointer items-start gap-4 rounded-lg border bg-white p-4 text-left transition-all duration-200 hover:shadow-md", layout === "grid" ? "min-h-[108px] flex-col sm:flex-row" : "flex-row"), "data-testid": "agent-gallery-card", "data-profile-id": profile.id, children: [_jsx(AgentProfileIcon, { svgIcon: profile.svgIcon, size: "md" }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [_jsx("h3", { className: "text-neutral-grey-100 truncate text-[12px] font-bold tracking-tight", children: displayTitle }), description && (_jsx("p", { className: cn("text-neutral-grey-50 text-xs leading-relaxed", layout === "grid" ? "line-clamp-3" : "line-clamp-2"), children: description }))] })] }));
}
//# sourceMappingURL=AgentGalleryCard.js.map