frontend/src/components/ResponseShellCard.tsx

import React from "react";
import type { ResponseMessageShell } from "../utils/responseShell";

export default function ResponseShellCard({ shell, compact = false }: { shell: ResponseMessageShell; compact?: boolean }) {
  const textSize = compact ? "text-xs" : "text-sm";
  return (
    <div className={`rounded-xl border border-slate-200 bg-slate-50 p-3 ${textSize} text-slate-800`}>
      <div>
        <span className="font-semibold text-slate-900">Result:</span> {shell.result}
      </div>
      {shell.why.length ? (
        <details className="mt-2 rounded-lg bg-white/70 p-2 ring-1 ring-slate-200">
          <summary className="cursor-pointer text-sm font-semibold text-slate-700">Why</summary>
          <ul className="mt-2 list-disc pl-5">
            {shell.why.map((line, idx) => (
              <li key={`${line}-${idx}`}>{line}</li>
            ))}
          </ul>
        </details>
      ) : null}
      {shell.next_action.length ? (
        <details className="mt-2 rounded-lg bg-white/70 p-2 ring-1 ring-slate-200">
          <summary className="cursor-pointer text-sm font-semibold text-slate-700">Next action</summary>
          <ul className="mt-2 list-disc pl-5">
            {shell.next_action.map((line, idx) => (
              <li key={`${line}-${idx}`}>{line}</li>
            ))}
          </ul>
        </details>
      ) : null}
    </div>
  );
}