import React, { useState, useRef, useEffect } from "react";
import styled from "styled-components";
import useTranslation from "../../../../hooks/useTranslation.jsx";
import wordStore from "../../../../mc/wordStore.json";
const InlineClampedText = ({ text }) => {
  const { findText } = useTranslation(wordStore);
  const [isExpanded, setIsExpanded] = useState(false);
  const [isClamped, setIsClamped] = useState(false);
  const textRef = useRef(null);
  useEffect(() => {
    const el = textRef.current;
    if (el) {
      // Check if the text is clamped by comparing scrollHeight and offsetHeight
      setIsClamped(el.scrollHeight > el.offsetHeight);
    }
  }, [text]);
  return (
    <Container>
      <TextWrapper isExpanded={isExpanded} ref={textRef}>
        {text}
      </TextWrapper>
      {isClamped && (
        <Toggle onClick={() => setIsExpanded(!isExpanded)}>
          {isExpanded ? findText("Show less") : findText("See more")}
        </Toggle>
      )}
    </Container>
  );
};
const Container = styled.div`
  font-size: 14px;
  color: #4a4d4d;
`;
const TextWrapper = styled.div`
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: ${(props) => (props.isExpanded ? "unset" : 2)};
  -webkit-box-orient: vertical;
  white-space: normal;
`;
const Toggle = styled.span`
  color: #00c2c2;
  font-size: 14px;
  cursor: pointer;
  margin-left: 5px;
`;
export default InlineClampedText;
