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";

export interface Props extends InstagramCardProps {
  hoverBgColor?: string;
}

function InstagramA(props: Props, ref: React.Ref<HTMLDivElement>) {
  const {
    text1: likesCount,
    text2: commentsCount,
    text3: captionText,
  } = props.data;
  const { showText3 = true } = props;
  return (
    <InstagramSquare {...props} 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 InstagramAMWithRef = React.forwardRef(InstagramA);

export { InstagramAMWithRef as InstagramA };