import * as React from "react";
import { Text, SkeletonLines } from "@front10/base-elements";
import { parseEmoji, twitterAutoLink } from "./strings";
import { ellipsis } from "polished";

interface Props {
  children?: string;
  lineClamp?: number;
  isLoading?: boolean;
}

function TweetContentElement({ children, lineClamp, isLoading }: Props) {
  const tweetContent = parseEmoji(twitterAutoLink(children || ""));
  if (isLoading) {
    return <SkeletonLines lines={lineClamp && lineClamp < 6 ? lineClamp : 6} />;
  }
  return (
    <Text
      sx={{
        ...ellipsis(null, lineClamp),
        fontSize: "14px",
        lineHeight: "1.5",
        whiteSpace: "pre-wrap",
        overflowWrap: "break-word",
        "& a": {
          color: "var(--color-primary)",
          textDecoration: "none",
        },
        "& a:hover": {
          textDecoration: "underline",
        },
      }}
      dangerouslySetInnerHTML={{ __html: tweetContent }}
    />
  );
}

export const TweetContent = React.memo(TweetContentElement);