import styles from "@/components/web/Loader/loader.module.css";

/**
 * A CSS-only loader that can be used to display a loading animation.
 * Supports passing a custom width and color for the loader.
 * @param {Object} props
 * @prop {number} [width] width of the loader in pixels
 * @prop {string} [color] color of the loader (hex, rgb, rgba, etc.)
 * @prop {string} [className] additional class names to add to the loader
 * @prop {Object} [style] additional styles to apply to the loader
 * @returns {JSX.Element}
 */
const Loader = (props) => {
  return (
    <div
      style={{
        ...(props?.style || {}),
        minWidth: props?.width ? `${props.width}px` : "15px",
        maxWidth: props?.width ? `${props.width}px` : "15px",
        width: props?.width ? `${props.width}px` : "15px",
        height: props?.width ? `${props.width}px` : "15px",
        minHeight: props?.width ? `${props.width}px` : "15px",
        maxHeight: props?.width ? `${props.width}px` : "15px",
        border: `${props?.width ? `${props.width / 2 / 4}px` : "2px"} solid ${
          props?.color || "#4a4a4a"
        }`,
      }}
      className={`${styles.loader} ${props?.className || ""}`}></div>
  );
};

export default Loader;
