import React, { CSSProperties } from "react";
import "./skeleton-styles.scss";
import { SkeletonProps } from "@app/models/components";

const Skeleton: React.FC<SkeletonProps> = ({ width, height, variant }) => {
  const style: CSSProperties = {
    width,
    height,
  };

  if (variant === "circular") {
    style.borderRadius = "50%";
    style.aspectRatio = "1";
  }

  if (variant === "square") {
    style.aspectRatio = "1";
  }

  if (variant === "rectangle") {
    style.aspectRatio = "3/4";
  }

  return <span className="skeleton-root" style={style}></span>;
};

export default Skeleton;