// Import necessary WordPress modules.
const { __ } = wp.i18n;
const { PanelColorSettings } = wp.blockEditor;

/**
 * ColorPickerSelection Component.
 *
 * A reusable color picker field using WordPress's PanelColorSettings component.
 *
 * @param {Object} props
 * @param {string} props.value - The current color value.
 * @param {Function} props.onChange - Callback when the color changes.
 * @param {string} [props.label] - Label for the color picker (defaults to "Color").
 */
const ColorPickerSelection = ({ value, onChange, label = __( 'Color', 'journey-timeline-block' ) }) => {
  return (
    <div className="ojb-input-wrap">
      {/* Renders a color picker with a panel-style layout. */}
      <PanelColorSettings
      className="ojb-style-colorpicker"
      title={label}
      colorSettings={[
        {
          value: value, // Current color value.
          onChange: onChange, // Function to call when color changes.
          label: __( 'Color', 'journey-timeline-block' ) // Label inside the panel.
        }
      ]}
      />
    </div>
  );
};

export default ColorPickerSelection;