import React, { useEffect, useState } from 'react';
import Loading from '../Loading';
import { TextWrap } from './TextWrap';
import { MediaBasicProps } from '.';

const Text: React.FC<MediaBasicProps> = ({
  media,
  mediaVisible,
  isDetail = true,
}) => {
  const [content, setContent] = useState<string>('');
  useEffect(() => {
    fetch(media)
      .then(r => r.text())
      .then(r => setContent(r));
  }, [media]);

  return (
    <TextWrap mediaVisible={mediaVisible} isDetail={isDetail}>
      <Loading
        cssStyle={`
          display: ${isDetail && content && 'none'};
        `}
      />
      <div className="hideScrollbar">{content}</div>
    </TextWrap>
  );
};

export default Text;
