import {
	Button,
} from '@wordpress/components';

import { __ } from '@wordpress/i18n';


type Props = {
	value: string;
	items: { label: string; title: string; value: string }[];
	onChange: (value: string) => void;
}
export default function TextTransform({ value, items, onChange }: Props) {

	return (
		<div className='apura-text-transform-control'>
			<span className='customize-control-title'>{__('Text Transform', 'apura')}</span>
			<div className='apura-button-group'>
				{items.map((item) => {
					return (
						<div className='apura-button-group__item' key={item.value}>
							<Button
								className='apura-button'
								isPressed={value === item.value}
								title={item.title}
								onClick={() => onChange(item.value)}
							>
								{item.label}
							</Button>
						</div>
					);
				})}
			</div>
		</div>
	);
}