import { Box, BoxProps, Theme } from "@mui/material";
import { makeStyles } from "@mui/styles";
import classNames from "classnames";
import { forwardRef, ReactNode } from "react";

const useStyles = makeStyles((_theme: Theme) => ({
  pulseWrapper: {
    position: 'relative',
    display: 'block', // Changed to block to respect Box margins
    width: 'fit-content', // Shrinks to child width
    '&::after': {
      content: '""',
      position: 'absolute',
      top: 0,
      left: 0,
      width: '100%',
      height: '100%',
      border: '2px solid var(--pulse-color)',
      borderRadius: 'inherit', // Should inherit from Box
      animation: '$pulse 1.75s infinite ease-in-out',
      pointerEvents: 'none',
      boxSizing: 'border-box',
      transition: "border-color 0.35s ease-in-out",
    },
  },
  '@keyframes pulse': {
    from: {
      transform: "scale(1)",
      opacity: 1
    },
    to: {
      transform: "scale(1.25)",
      opacity: 0
    }
  },
}));

interface Props extends BoxProps {
  color: string;
  children: ReactNode;
  className?: string;
}

const PulseBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
  const { color, children, className, ...boxProps } = props;
  const classes = useStyles()

  return (
    <Box 
      ref={ref}
      {...boxProps}
      className={classNames([classes.pulseWrapper, className])} 
      style={{ '--pulse-color': color } as React.CSSProperties}
    >
      {children}
    </Box>
  );
});

// Optional: Add a display name for better debugging
PulseBox.displayName = "PulseBox";

export default PulseBox;
