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

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

export function InstagramText(props: Props) {
  return (
    <>
      {props.isLoading ? (
        <SkeletonLines lines={props.lineClamp} />
      ) : (
        <Text
          sx={{
            ...ellipsis(null, props.lineClamp),
            lineHeight: "1.3",
          }}
        >
          {props.children}
        </Text>
      )}
    </>
  );
}