import React, { FC, useState } from 'react';
import { Typography } from '..';
import { ExpandableTextProps } from './interfaces';
import { Wrapper } from './styles';

export const ExpandableText: FC<ExpandableTextProps> = ({
  shortText,
  longText,
  expandButtonText,
  onExpand,
  typographyVariant,
}: ExpandableTextProps) => {
  const [isExpanded, setIsExpanded] = useState(false);

  const handleExpandClick = () => {
    if (onExpand) {
      onExpand();
    }

    setIsExpanded(true);
  };

  const tappableText = expandButtonText || 'Read More';

  const text = isExpanded ? (
    <Typography variant={typographyVariant ?? 'p2'}>{longText}</Typography>
  ) : (
    <Typography variant={typographyVariant ?? 'p2'}>
      {shortText} ... <a onClick={handleExpandClick}>{tappableText}</a>
    </Typography>
  );

  return <Wrapper>{text}</Wrapper>;
};