import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import { justifyLeft, justifyCenter, justifyRight } from '@wordpress/icons';
import { __ } from '@wordpress/i18n';

export default function JustificationControl({ value, onChange, label = __('Justification', 'directory-listings') }) {
    const options = [
        { icon: justifyLeft, value: 'left', label: __('Left', 'directory-listings') },
        { icon: justifyCenter, value: 'center', label: __('Center', 'directory-listings') },
        { icon: justifyRight, value: 'right', label: __('Right', 'directory-listings') },
    ];

    return (
        <div className="justification-control">
            {/* Label above toolbar */}
            <div className="justification-control__label" style={{ marginBottom: '4px', display: 'block' }}>
                {label}
            </div>

            <ToolbarGroup label={label}>
                {options.map((option) => (
                    <ToolbarButton
                        key={option.value}
                        icon={option.icon}
                        label={option.label} // accessible for screen readers
                        isPressed={value === option.value}
                        onClick={() => onChange(option.value)}
                    />
                ))}
            </ToolbarGroup>
        </div>
    );
}