/* eslint-disable react/prop-types */
import React from "react";
export default function CenterGrowSlider({
  value,
  min = -50,
  max = 50,
  backgroundColor = "rgba(150,150,150,0.3)",
  height = 8,
}) {
  // Clamp the value
  const clamped = Math.max(min, Math.min(max, value));
  const range = max - min;
  const halfRange = range / 2;
  const magnitude = Math.abs(clamped) / halfRange; // 0..1

  // Calculate widths (each bar maxes out at 50% width)
  const positiveWidth = clamped > 0 ? magnitude * 50 : 0;
  const negativeWidth = clamped < 0 ? magnitude * 50 : 0;

  const baseStyle = {
    position: "absolute",
    top: "50%",
    height: `${height}px`,
    transform: "translateY(-50%)",
  };

  return (
    <div
      style={{
        position: "relative",
        width: "100%",
        height: `${height}px`,
        backgroundColor,
        overflow: "hidden",
      }}
    >
      {/* Negative (left) bar */}
      <div
        className="bg-primary shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]"
        style={{
          ...baseStyle,
          right: "50%", // anchored to the center
          width: `${negativeWidth}%`,
        }}
      />

      {/* Positive (right) bar */}
      <div
        className="bg-primary shadow-primary/40 shadow-[0_0_16px,inset_0_1px_2px_rgba(255,255,255,0.3)]"
        style={{
          ...baseStyle,
          left: "50%", // anchored to the center
          width: `${positiveWidth}%`,
        }}
      />
    </div>
  );
}