import { blue } from '../../lib/constant';
import { HighlightSegment } from '../../lib/types';
import SectionTitle from './SectionTitle';

export default function HighlightedText({
  segments,
}: {
  segments: HighlightSegment[];
}) {
  return (
    <>
      <SectionTitle>Matn ko&apos;rish</SectionTitle>
      <div
        className="rounded-lg p-4 text-sm leading-relaxed mb-5"
        style={{
          background: blue[50],
          border: `0.5px solid ${blue[100]}`,
          color: blue[900],
          lineHeight: '1.8',
        }}
      >
        {segments.map((seg, i) =>
          seg.plagiarized ? (
            <mark
              key={i}
              style={{
                background: '#FEE2E2',
                color: '#991B1B',
                borderRadius: '3px',
                padding: '1px 2px',
              }}
            >
              {seg.text}
            </mark>
          ) : (
            <span key={i}>{seg.text}</span>
          ),
        )}
        <p className="mt-3 text-[11px]" style={{ color: blue[400] }}>
          <span
            className="inline-block w-3 h-3 rounded-sm mr-1 align-middle"
            style={{ background: '#FEE2E2', border: '1px solid #FCA5A5' }}
          />
          Qizil bilan belgilangan qismlar plagiat deb topilgan.
        </p>
      </div>
    </>
  );
}