"use client";
import { useTranslations } from "next-intl";
import { useState } from "react";

function ReviewDescription({ description }: { description: string }) {
  const [expanded, setExpanded] = useState(false);
  const maxLength = 120;
  const t = useTranslations();
  if (!description)
    return (
      <span className="text-sm text-gray-600 dark:text-neutrals400">N/A</span>
    );

  const isLong = description.length > maxLength;
  const text = expanded ? description : description.slice(0, maxLength);

  return (
    <span className="text-sm text-gray-600 dark:text-neutrals400">
      {text}
      {isLong && (
        <>
          {" "}
          {!expanded ? (
            <>
              ...{" "}
              <button
                onClick={() => setExpanded(true)}
                className="text-primary500 font-medium dark:text-primary400"
              >
                {t("read_more")}
              </button>
            </>
          ) : (
            <>
              {" "}
              <button
                onClick={() => setExpanded(false)}
                className="text-primary500 font-medium dark:text-primary400"
              >
                {t("read_less")}
              </button>
            </>
          )}
        </>
      )}
    </span>
  );
}

export default ReviewDescription;