import type { JSX } from 'react';
import DetailImages from './DetailImages';
import { IProductDetail } from '@/shared/types/testApi';
import DOMPurify from 'dompurify';
import '../lib/editorStyle.css';

interface IProductDetailProps {
  item: IProductDetail | undefined;
}

const ProductDetails = ({ item }: IProductDetailProps): JSX.Element => {
  const cleanHtml = DOMPurify.sanitize(item?.table || '');

  return (
    <div className="my-[30px]">
      <div className="custom-container">
        <div className="flex justify-between max-md:flex-col gap-4">
          <div className="flex-1">
            <DetailImages
              imageData={{ coverImage: item?.image, images: item?.images }}
            />
          </div>
          <div className="flex-[1.3] lg:flex-[1.5] md:mt-[15px]">
            <div className="space-y-1">
              <div className="font-bold text-[30px] text-accent">
                {item?.title}
              </div>
            </div>
            <div className="text-primary font-semibold">{item?.subtitle}</div>
            <hr className="my-[10px]" />
            <div className="text-accent font-semibold">Детали:</div>
            <div className="text-[14px] font-medium text-muted">
              {String(item?.description)
                .split('\n')
                .map((line, i) => (
                  <div key={i}>{line}</div>
                ))}
            </div>
          </div>
        </div>

        <hr className="mt-[20px]" />

        <div className="flex justify-between gap-2 my-[20px] max-md:flex-col">
          <div className="flex-[1.3] space-y-2">
            <div className="font-bold text-[18px] text-accent">
              Подробная информация о продукции
            </div>
            <p className="text-muted font-medium text-[14px]">
              {item?.content}
            </p>
          </div>
          {item?.link && (
            <div className="flex-1">
              <iframe
                width="100%"
                height="250"
                src={item?.link}
                title="YouTube video player"
              ></iframe>
            </div>
          )}
        </div>
        <div
          className="space-y-[20px] ckeditor-output"
          dangerouslySetInnerHTML={{ __html: cleanHtml }}
        ></div>
      </div>
    </div>
  );
};

export default ProductDetails;
