import React from "react";
import { Box, CircularProgress } from "@mui/material";

import StyleEditorForm from "./StyleEditorForm";
import type { StyleEditorPanelProps } from "./styleEditorTypes";

const StyleEditorPanel: React.FC<StyleEditorPanelProps> = ({
  isReady,
  ...formProps
}) => {
  if (!isReady) {
    return (
      <Box
        sx={{
          position: "absolute",
          top: 72,
          left: 12,
          zIndex: 1300,
          width: 160,
          height: 72,
          display: "grid",
          placeItems: "center",
          bgcolor: "background.paper",
          borderRadius: "12px",
          boxShadow:
            "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
          opacity: 0.95,
        }}
      >
        <CircularProgress size={22} />
      </Box>
    );
  }

  return <StyleEditorForm {...formProps} />;
};

export default StyleEditorPanel;
