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 InstagramL(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(33, 150, 243, 0.9)"
      breakpoint={150}
      ref={ref}
    >
      <Stack
        gap={2}
        sx={{
          width: "80%",
          margin: "0 auto",
        }}
      >
        {cardWidth > 200 ? (
          <InstagramReactions
            align="center"
            likes={likesCount}
            comments={commentsCount}
          />
        ) : null}
        {showText3 ? (
          <InstagramText lineClamp={4}>{captionText}</InstagramText>
        ) : null}
      </Stack>
    </InstagramSquare>
  );
}

const InstagramLMWithRef = React.forwardRef(InstagramL);

export { InstagramLMWithRef as InstagramL };