frontend/src/components/OutputPanel.tsx

import React from "react";

type Props = {
  data: any | null;
};

export default function OutputPanel({ data }: Props) {
  if (!data) return null;
  if (data.error) return <div style={{ color: "crimson" }}>Error: {data.error}</div>;

  return (
    <div style={{ marginTop: 16, padding: 16, border: "1px solid #eee", borderRadius: 12 }}>
      <h3 style={{ marginTop: 0 }}>結果</h3>
      <div><strong>件名:</strong> {data.subject}</div>
      <div style={{ whiteSpace: "pre-wrap", marginTop: 8 }}>{data.body}</div>
      <div style={{ marginTop: 12, opacity: 0.8 }}>
        <div>toxicity: {data.quality?.toxicity?.toFixed?.(3)}</div>
        <div>sentiment: {data.quality?.sentiment?.toFixed?.(3)}</div>
        {data.warnings?.length ? (
          <ul>{data.warnings.map((w: string, i: number) => <li key={i}>{w}</li>)}</ul>
        ) : null}
        {data.lint?.issues?.length ? (
          <>
            <div style={{ marginTop: 8 }}><strong>Lint:</strong></div>
            <ul>{data.lint.issues.map((w: string, i: number) => <li key={i}>{w}</li>)}</ul>
          </>
        ) : null}
      </div>
    </div>
  );
}