src/components/AnalysisCard.tsx

import type { AnalysisRow } from "../api/chat";
import { Icon } from "./Icon";

type Props = {
  rows: AnalysisRow[];
  heading?: string;
};

function RightCol({
  text,
  style,
}: {
  text: string;
  style?: string;
}) {
  const muted = style === "muted";
  const success = style === "success";
  return (
    <span
      className={`font-semibold ${
        success
          ? "text-[#10B981]"
          : muted
            ? "text-secondary opacity-50"
            : "text-on-surface"
      }`}
    >
      {text}
    </span>
  );
}

export function AnalysisCard({
  rows,
  heading = "Analyzing request & catalog match",
}: Props) {
  return (
    <div className="flex justify-start">
      <div className="flex items-start gap-3 w-full">
        <div className="w-8 h-8 rounded-full bg-secondary-container flex items-center justify-center shrink-0">
          <Icon
            name="smart_toy"
            className="text-on-secondary-container text-sm"
          />
        </div>
        <div className="flex-1 max-w-[85%]">
          <div className="bg-surface-container p-4 rounded-2xl border border-outline-variant">
            <div className="flex items-center gap-2 mb-3">
              <span className="w-2 h-2 rounded-full bg-[#10B981] animate-pulse" />
              <span className="font-label-caps text-label-caps text-secondary uppercase">
                {heading}
              </span>
            </div>
            <div className="space-y-3">
              {rows.map((row, i) => (
                <div
                  key={`${row.left}-${i}`}
                  className="flex items-center justify-between gap-3 text-body-sm font-body-sm text-on-surface p-2 bg-white rounded border border-outline-variant"
                >
                  <div className="flex items-start gap-2 min-w-0">
                    <Icon
                      name={(row.icon as string) || "inventory_2"}
                      className="text-primary text-sm shrink-0 mt-0.5"
                    />
                    <span className="break-words">{row.left}</span>
                  </div>
                  <RightCol text={row.right} style={row.right_style} />
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}