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

const NosearchPickReviewSlider = ({
  reviews,
  firstReview,
  onClickAllReviewsButton,
}: {
  reviews: IReviewDataWithReport[];
  firstReview: string;
  onClickAllReviewsButton?: () => void;
}) => {
  const hasNosearchTwoLines = firstReview !== "";
  const reviewsLength = hasNosearchTwoLines
    ? reviews.length - 1
    : reviews.length;

  if (reviews.filter((review) => review.type === "user").length === 0) {
    return null;
  }

  return (
    <div className="border-t-[1px] border-gray-3 pt-[2rem]">
      <div className={`mb-[1.2rem] flex items-center justify-between`}>
        <div className="flex space-x-[0.6rem]">
          <Text type="B2" className="text-gray-10">
            구매 후기
          </Text>
          <Text type="B2" className="text-blue-7">
            {reviewsLength}
          </Text>
        </div>

        {/* TODO: 전체보기 페이지 개발 전까지 주석 처리 */}
        {/* {reviews.length > 3 && (
          <Button
            size="s"
            type="primary"
            onClick={(e) => {
              if (e) {
                e.preventDefault();
              }
              onClickAllReviewsButton && onClickAllReviewsButton();
            }}
          >
            전체보기
          </Button>
        )} */}
      </div>

      <SlideWrapper
        size={reviewsLength >= 3 ? 3 : reviewsLength}
        floatButton={false}
        buttonStyle={{
          width: "3rem",
        }}
      >
        {reviews
          .filter((review) => review.type === "user")
          .map((review, index: number) => {
            return (
              <NosearchPickReview
                key={`nsPick_review${index}`}
                useSlider
                review={review}
                reviewCnt={reviewsLength}
              />
            );
          })}
      </SlideWrapper>
    </div>
  );
};

export default NosearchPickReviewSlider;