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

const ColumnTag = ({ value = 'div', onChange }) => {
  const options = [
    { label: __('Div', 'axcelersblocks'), value: 'div' },
    { label: __('Section', 'axcelersblocks'), value: 'section' },
    { label: __('Article', 'axcelersblocks'), value: 'article' },
    { label: __('Aside', 'axcelersblocks'), value: 'aside' },
    { label: __('Header', 'axcelersblocks'), value: 'header' },
    { label: __('Footer', 'axcelersblocks'), value: 'footer' },
    { label: __('Main', 'axcelersblocks'), value: 'main' },
    { label: __('Nav', 'axcelersblocks'), value: 'nav' },
  ];

  return (
    <SelectControl
      label={__('HTML tag', 'axcelersblocks')}
      value={value}
      options={options}
      onChange={(val) => onChange(val)}
    />
  );
};

export default ColumnTag;
