import classnames from 'classnames';

import Gap from 'bloko/blocks/gap';
import VSpacing from 'bloko/blocks/vSpacing';

// eslint-disable-next-line no-unused-vars
const ValidComponent = () => (
    <>
        <Gap>
            <div className={`valid-class`} />
            <div className="valid-class" />
            {/* <div className='bloko-row'/> */}
            <VSpacing base={2} />
            <div className="valid-class valid-class_modifier" />
            <div className={classnames('g-hidden valid-bloko-gap valid-bloko-form', { 'valid-form-row': true })} />
            <div
                className={classnames('g-hidden valid-gap valid-form', [
                    { 'valid-form-row': true },
                    'valid-select',
                    `valid-select`,
                ])}
            />
            <div
                className={() =>
                    classnames('g-hidden valid-gap valid-form', [
                        { 'valid-form-row': true },
                        'valid-select',
                        `valid-select`,
                    ])()
                }
            />
            <div dataQA="bloko-component" />
        </Gap>
        {/* <div className='bloko-row'/> */}
        {/* `<div className="bloko-row"/>`; */}
    </>
);
/* eslint-disable no-unused-expressions */
('<div className="bloko-row" />');
`<div className="bloko-row" />`;
("<div className='bloko-row' />");
`<div className='bloko-row bloko-something'/>`;
/* eslint-enable no-unused-expressions */