import './style.scss';

import { TabPanel } from '@wordpress/components';
import { Component, RawHTML } from '@wordpress/element';

/**
 * Component Class
 */
export default class TabsControl extends Component {
	render() {
		const { onChange, children, options } = this.props;

		return (
			<TabPanel
				className="vpf-component-tabs-control"
				onSelect={onChange}
				tabs={options.map((item) => {
					return {
						name: item.category,
						title: item.title,
						icon: item.icon ? <RawHTML>{item.icon}</RawHTML> : null,
					};
				})}
			>
				{children}
			</TabPanel>
		);
	}
}