import type { OilSpillReportData } from '@interfaces/reports/ReportsInterface';
import { S } from '../OilSpillReportTemplate';

export function Page3({
  data,
  editing,
  onChange,
}: {
  data: OilSpillReportData;
  editing: boolean;
  onChange: (d: OilSpillReportData) => void;
}) {
  return (
    <div style={S.page}>
      <div className="absolute top-2.5 right-4 text-caption text-fg-disabled font-semibold">
        해양오염방제지원시스템
      </div>
      <div style={S.sectionTitle}>분석</div>
      {editing ? (
        <textarea
          value={data.analysis}
          onChange={(e) => onChange({ ...data, analysis: e.target.value })}
          placeholder="분석 내용을 작성하세요..."
          style={{
            width: '100%',
            minHeight: '300px',
            background: 'var(--bg-base)',
            border: '1px solid var(--stroke-light)',
            borderRadius: '4px',
            padding: '16px',
            fontSize: 'var(--font-size-title-4)',
            outline: 'none',
            resize: 'vertical',
            lineHeight: '1.8',
          }}
        />
      ) : (
        <div
          style={{
            minHeight: '300px',
            border: data.analysis
              ? '1px solid var(--stroke-default)'
              : '2px dashed var(--stroke-default)',
            borderRadius: '4px',
            padding: '16px',
            color: data.analysis ? 'var(--fg-default)' : 'var(--fg-disabled)',
            fontStyle: data.analysis ? 'normal' : 'italic',
            fontSize: 'var(--font-size-title-4)',
            whiteSpace: 'pre-wrap',
            lineHeight: '1.8',
          }}
        >
          {data.analysis || '분석 내용이 없습니다'}
        </div>
      )}
    </div>
  );
}
