import Loader from "../loader";
import styled from "styled-components";

const LoaderCustom = ({
  zoom = 0.3,
  color = "#00c2c2",
  position,
  fitHeight,
}) => {
  return (
    <Container
      style={{
        height: fitHeight ? "fit-content" : undefined,
      }}
      positionValue={
        position === "left"
          ? "flex-start"
          : position === "right"
          ? "flex-end"
          : "center"
      }
    >
      <Loader
        color={color}
        zoom={zoom}
        style={{
          textAlign: "center",
        }}
      />
    </Container>
  );
};

export default LoaderCustom;

const Container = styled.div`
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: ${({ positionValue }) => positionValue};
  align-items: center;
`;
