import React from "react";
import Text from "../UI/Text";
import { IReviewDataWithReport } from "./NosearchPick.types";

const NosearchPickReview = ({
  review,
  reviewCnt,
  useSlider = false,
}: {
  review: IReviewDataWithReport;
  reviewCnt: number;
  useSlider?: boolean;
}) => {
  const reviewWidthOnSlider = reviewCnt === 1 ? "w-full" : "w-[95%]";

  return (
    <div className={useSlider ? reviewWidthOnSlider : "w-full min-w-[28rem]"}>
      <div
        className={`${
          review.type === "nosearch" ? "bg-blue-1" : "cursor-pointer bg-gray-1"
        }  h-[8.6rem] rounded-lg p-[1.2rem]`}
        onClick={(e) => {
          e.preventDefault();
          if (
            (e.target as HTMLElement).textContent === "신고" ||
            review.type === "nosearch"
          ) {
            return;
          }

          review.onClickReview({
            productId: review.productId,
            type: review.type,
            content: review.content,
            createdAt: review.createdAt,
            images: review.images,
            point: review.point,
            writer: review.writer,
            onClickReview: review.onClickReview,
          });
        }}
      >
        <div className="mb-[0.4rem]">
          {review.type === "nosearch" ? (
            <div className="flex items-center justify-center">
              <img
                src="/static/images/app_logo.png"
                className="mr-[0.4rem] w-[1.6rem]"
              />
              <Text type="D2" className="whitespace-nowrap text-blue-8">
                노써치 두줄평
              </Text>
            </div>
          ) : (
            <Text type="D2" className="text-gray-6">
              구매후기
            </Text>
          )}
        </div>

        <p
          className={`break-all text-body-8 text-gray-10 line-clamp-2 ${
            review.type === "nosearch" ? "text-center font-bold" : "font-medium"
          }`}
          dangerouslySetInnerHTML={{
            __html: review.content,
          }}
          aria-label="노써치 리뷰"
        />
      </div>
    </div>
  );
};

export default NosearchPickReview;