import React from "react";
import styled from "styled-components";
import { Skeleton } from "@material-ui/lab";

const SkeletonWrapper = styled.div`
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: stretch;
`;

const SkeletonRow = styled.div`
  width: 100%;
  border-radius: 18px;
  overflow: hidden;
`;

const SkeletonContainer = ({ rowHeight = 100, isOpenFromModal }) => {
  const rowCount = isOpenFromModal ? 3 : 4;

  return (
    <SkeletonWrapper>
      {Array.from({ length: rowCount }).map((_, index) => (
        <SkeletonRow key={index}>
          <Skeleton
            style={{ backgroundColor: "#F2F2F2", borderRadius: "18px" }}
            variant="rect"
            animation="wave"
            width="100%"
            height={rowHeight}
          />
        </SkeletonRow>
      ))}

      <SkeletonRow>
        <Skeleton
          style={{ backgroundColor: "#F2F2F2", borderRadius: "18px" }}
          variant="rect"
          animation="wave"
          width="100%"
          height={Math.max(Math.round(rowHeight * 0.78), 72)}
        />
      </SkeletonRow>
    </SkeletonWrapper>
  );
};

export default SkeletonContainer;