import { Stack } from "@front10/base-elements";
import * as React from "react";
import { InstagramCardProps } from "./InstagramCard";
import { InstagramReactions } from "./InstagramReactions";
import { InstagramSquare } from "./InstagramSquare";
import { InstagramText } from "./InstagramText";

function InstagramE(props: InstagramCardProps, ref: React.Ref<HTMLDivElement>) {
  const {
    text1: likesCount,
    text2: commentsCount,
    text3: captionText,
  } = props.data;
  const { showText3 = true } = props;
  return (
    <InstagramSquare
      {...props}
      hoverBgColor="rgba(33, 150, 243, 0.9)"
      ref={ref}
    >
      <Stack
        gap={2}
        sx={{
          width: "80%",
          margin: "0 auto",
        }}
      >
        <InstagramReactions
          align="center"
          likes={likesCount}
          comments={commentsCount}
        />
        {showText3 ? (
          <InstagramText lineClamp={4}>{captionText}</InstagramText>
        ) : null}
      </Stack>
    </InstagramSquare>
  );
}

const InstagramEMWithRef = React.forwardRef(InstagramE);

export { InstagramEMWithRef as InstagramE };