import { LinkifiedText } from '../../../lib/linkified-text';
import { useTranslation } from 'react-i18next';

interface OutputTabProps {
  outputPreviewName: string;
  outputPreviewContent: string;
  onViewFull: () => void;
}

export function OutputTab({ outputPreviewName, outputPreviewContent, onViewFull }: OutputTabProps) {
  const { t } = useTranslation('detail');
  return (
    <div className="bg-canvas border border-slate-200 rounded-xl p-4 shadow-sm">
      <div className="flex justify-between items-center mb-2">
        <div className="font-bold text-[13px] text-slate-800">{t('output.title')}</div>
        {outputPreviewName && (
          <button onClick={onViewFull} className="text-2xs text-blue-600 font-bold hover:underline">{t('output.viewFull')}</button>
        )}
      </div>
      {outputPreviewName ? (
        <>
          <div className="text-2xs text-slate-400 mb-2 font-mono">{outputPreviewName}</div>
          {/* LinkifiedText turns inline `output/foo.md` references into
              clickable anchors that the OutputPreviewProvider opens in
              the preview pane. Plain `<pre>` rendering otherwise. */}
          <LinkifiedText
            as="pre"
            className="text-xs whitespace-pre-wrap bg-slate-50 rounded-xl p-3 min-h-[260px] max-h-[540px] overflow-auto border border-slate-100"
            text={outputPreviewContent.slice(0, 12000)}
          />
        </>
      ) : (
        <div className="text-[13px] text-slate-500">{t('output.empty')}</div>
      )}
    </div>
  );
}