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

/**
 * FontFamilySelector Component.
 *
 * A dropdown that allows users to select a font family.
 * Pulls available font families from the active theme's typography settings.
 *
 * @param {Object} props
 * @param {string} props.label - The label to show above the select box.
 * @param {string} props.value - The currently selected font family.
 * @param {Function} props.onChange - Callback when the selected font family changes.
 */

const FontFamilySelector = ({ label, value, onChange }) => {

    // Get font family options from the current theme settings.
    const rawFontFamilies = useSetting( 'typography.fontFamilies' );

    // Safely extract theme-defined font families (if available).
    const fontFamilies = Array.isArray( rawFontFamilies?.theme ) ? rawFontFamilies.theme : [];

    // Create options array for the <SelectControl> dropdown.
    const options = [
    { label: __( 'Default', 'journey-timeline-block' ), value: '' }, // Default fallback option.
    ...fontFamilies.map( ( font ) => ({
        label: font.name, // Display name.
        value: font.name // Used as the actual value.
    }) )
    ];

    // Check if "Fredoka" is already present — if not, add it.
    const isFredokaIncluded = options.some((opt) => opt.value.toLowerCase() === 'fredoka');
    // If "Fredoka" is not present, add it to the options array.
    if (!isFredokaIncluded) {
        options.push({
            label: 'Fredoka',
            value: 'Fredoka',
        });
    }

    return (
        <div className="ojb-input-wrap">
             {/* Render a WordPress select input to pick a font family. */}
            <SelectControl
                label={label}
                value={value}
                options={options}
                onChange={onChange}
            />
        </div>
    );
};

export default FontFamilySelector;