import { Stack, useContainerSize } 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 InstagramF(props: InstagramCardProps, ref: React.Ref<HTMLDivElement>) {
  const {
    text1: likesCount,
    text2: commentsCount,
    text3: captionText,
  } = props.data;
  const cardWidth = useContainerSize(ref as any);
  const { showText3 = true } = props;
  return (
    <InstagramSquare
      {...props}
      hoverBgColor="rgba(226, 90, 57, 0.95)"
      breakpoint={150}
      ref={ref}
    >
      <Stack
        gap={2}
        alignY="space-between"
        sx={{
          width: "80%",
          maxWidth: "80%",
          margin: "0 auto",
          height: "100%",
          padding: "15px",
        }}
      >
        {showText3 ? (
          <InstagramText lineClamp={4}>{captionText}</InstagramText>
        ) : null}
        {cardWidth > 200 ? (
          <InstagramReactions
            align="center"
            comments={commentsCount}
            likes={likesCount}
          />
        ) : null}
      </Stack>
    </InstagramSquare>
  );
}

const InstagramFMWithRef = React.forwardRef(InstagramF);

export { InstagramFMWithRef as InstagramF };