/**
 * Syntax Helper — shows command signature below the input
 * Ball Studios <https://git.balls.studio>
 */

import React from 'react';

interface Suggestion { syntax: string; examples: string[]; plugin: string; }
interface Props { suggestion: Suggestion; }

export default function SyntaxHelper({ suggestion }: Props) {
    return (
        <div className='addon-syntax-helper'>
            <code className='addon-syntax'>{suggestion.syntax}</code>
            {suggestion.examples.length > 0 && (
                <span className='addon-syntax-example'>e.g. {suggestion.examples[0]}</span>
            )}
            {suggestion.plugin && (
                <span className='addon-syntax-plugin'>[{suggestion.plugin}]</span>
            )}
        </div>
    );
}