components/improvement-result/summary-table.tsx

import { Table, TableBody, TableCell, TableRow } from '@/components/ui/table';
import type { ProposalTabData } from '@/schema/proposal';

interface SummaryTableProps {
  intent?: ProposalTabData['intent'];
}

export default function SummaryTable({ intent }: SummaryTableProps) {
  // 訴求テーマを取得
  let appealTheme = '';

  // strategyXMomentItemから直接値を取得
  if (intent?.strategyXMomentItem) {
    appealTheme = intent.strategyXMomentItem.cl_theme || '';
  }

  return (
    <Table className="w-full border-collapse border border-[#ccc] text-[13px] [&_td]:font-medium" id="summary-table" data-testid="summary-table">
      <TableBody className="text-[13px]">
        <TableRow>
          <TableCell className="w-48 border border-[#e4e7ec] bg-[#F8FBFD] p-3 align-middle">戦略</TableCell>
          <TableCell className="border border-[#e4e7ec] bg-[#ECF6FC] p-3 align-middle" id="strategy-cell" data-testid="strategy-cell">
            {intent?.strategy}
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="border border-[#e4e7ec] bg-[#F8FBFD] p-3 align-middle">方向性</TableCell>
          <TableCell className="border border-[#e4e7ec] bg-[#ECF6FC] p-3 align-middle" id="direction-cell" data-testid="direction-cell">
            {intent?.direction}
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="border border-[#e4e7ec] bg-[#F8FBFD] p-3 align-middle">訴求テーマ</TableCell>
          <TableCell className="border border-[#e4e7ec] bg-[#ECF6FC] p-3 align-middle" id="appeal-theme-cell" data-testid="appeal-theme-cell">
            {appealTheme}
          </TableCell>
        </TableRow>
        <TableRow>
          <TableCell className="border border-[#e4e7ec] bg-[#F8FBFD] p-3 align-middle">
            <p>FV</p>
            <p>構成意図</p>
          </TableCell>
          <TableCell
            className="border border-[#e4e7ec] bg-[#ECF6FC] p-3 align-middle"
            dangerouslySetInnerHTML={{ __html: (intent?.FV_intent || '').replace(/\n/g, '<br>') }}
          />
        </TableRow>
        <TableRow>
          <TableCell className="border border-[#e4e7ec] bg-[#F8FBFD] p-3 align-middle">コンテンツ 構成意図</TableCell>
          <TableCell
            className="border border-[#e4e7ec] bg-[#ECF6FC] p-3 align-middle"
            dangerouslySetInnerHTML={{ __html: (intent?.CN_intent || '').replace(/\n/g, '<br>') }}
          />
        </TableRow>
        <TableRow>
          <TableCell className="border border-[#e4e7ec] bg-[#F8FBFD] p-3 align-middle">UI/UX 改善案</TableCell>
          <TableCell className="border border-[#e4e7ec] bg-[#ECF6FC] p-3 align-middle">
            {intent?.FV_suggest && intent?.CN_suggest && (
              <>
                <p>FV改善案</p>
                <p dangerouslySetInnerHTML={{ __html: (intent.FV_suggest || '').replace(/\n/g, '<br>') }} />
                <br />
                <p>コンテンツ改善案</p>
                <p dangerouslySetInnerHTML={{ __html: (intent.CN_suggest || '').replace(/\n/g, '<br>') }} />
              </>
            )}
          </TableCell>
        </TableRow>
      </TableBody>
    </Table>
  );
}