import {
  LayeringBottomIcon,
  LayeringTopIcon,
} from "../../../icons/ExportCommonIcons";
import InputRange from "../../../ui/inputs/InputRange";
import RotationInput from "../customInput/RotationInput";
import Vector3Input from "../customInput/Vector3Input";

const DecalProperties = () => {
  return (
    <div className="decal-transformation-container">
      <div className="header">Decal Propertis</div>
      <section>
        <RotationInput
          onChange={() => {}}
          value={10}
        />
        <Vector3Input
          onChange={(value) => console.log(value)}
          header="Scale"
          value={[0, 0, 0] as [number, number, number]}
        />
      </section>

      <section>
        <InputRange
          label="Opacity"
          value={1}
          min={0}
          step={0.1}
          max={1}
          onChange={(value: number) => console.log(value)}
          key={"6"}
        />

        <div className="transformation-wrapper opacity">
          <div className="transformation-header">Layering</div>

          <div className="layers-list">
            <button className="layer-move-btn">
              <LayeringBottomIcon />
            </button>
            <button className="layer-move-btn">
              <LayeringTopIcon />
            </button>
          </div>
        </div>
      </section>
    </div>
  );
};

export default DecalProperties;