/* eslint-disable jsx-a11y/label-has-associated-control */
import { observer } from 'mobx-react';
import * as React from 'react';
import './KeyphraseQueryView.scss';

// tslint:disable-next-line: class-name
export interface KP_Props {
    keyphrases: string;
}

@observer
export class KeyphraseQueryView extends React.Component<KP_Props> {
    render() {
        const keyterms = this.props.keyphrases.split(',');
        return (
            <div>
                <h5>Select queries to send:</h5>
                <form>
                    {keyterms.map((kp: string) => (
                        //  return (<p>{"-" + kp}</p>);
                        <p>
                            <label>
                                <input name="query" type="radio" />
                                <span>{kp}</span>
                            </label>
                        </p>
                    ))}
                </form>
            </div>
        );
    }
}