// Import necessary WordPress modules.
const { __ } = wp.i18n;
const { SelectControl } = wp.components;

/**
 * FontWeightSelector Component.
 *
 * Renders a dropdown for selecting font weight options.
 *
 * @param {Object} props
 * @param {string} props.value - The currently selected font weight.
 * @param {Function} props.onChange - Callback function triggered when font weight changes.
 * @param {string} [props.label] - Optional label for the select field (defaults to "Font Weight").
 */
const FontWeightSelector = ({ value, onChange, label = __( 'Font Weight', 'journey-timeline-block' ) }) => {

  // Predefined list of font weight options with human-readable labels.
  const fontWeightOptions = [
    { label: __( 'Default', 'journey-timeline-block' ), value: '' },
    { label: __( 'Thin', 'journey-timeline-block' ), value: '100' },
    { label: __( 'Light', 'journey-timeline-block' ), value: '300' },
    { label: __( 'Normal', 'journey-timeline-block' ), value: '400' },
    { label: __( 'Medium', 'journey-timeline-block' ), value: '500' },
    { label: __( 'Semi Bold', 'journey-timeline-block' ), value: '600' },
    { label: __( 'Bold', 'journey-timeline-block' ), value: '700' },
    { label: __( 'Extra Bold', 'journey-timeline-block' ), value: '800' },
    { label: __( 'Black', 'journey-timeline-block' ), value: '900' }
  ];

  return (
    <div className="ojb-input-wrap">
      {/* Select dropdown for font weight. */}
      <SelectControl
        label={label} // Displayed label above the dropdown.
        value={value} // Current selected value.
        options={fontWeightOptions} // Font weight options array.
        onChange={onChange} // Callback to update selection.
        className="ojb-input-fontweight" // Custom CSS class for styling.
      />
    </div>
  );
};

export default FontWeightSelector;