import { LayoutFlex, TextHighlighted } from '@preply/ds-web-lib';
import React, { FC } from 'react';

import { Hint } from './TokenList';
import { Alternatives, Heading, Note } from './TokenSearchHint.styles';

type Props = {
    hint: Hint;
};

export const TokenSearchHint: FC<Props> = ({ hint }) => {
    const alternatives = hint.alternatives || [];
    return (
        <LayoutFlex gap="24" column>
            <Heading>
                Searching for <TextHighlighted>{hint.name}</TextHighlighted>?{' '}
            </Heading>
            <LayoutFlex gap="8" column>
                {alternatives.length && (
                    <Alternatives>
                        Try searchinng for{' '}
                        {alternatives.map((alt, index) => (
                            <>
                                <TextHighlighted key={alt}>{alt}</TextHighlighted>
                                {index + 2 < alternatives.length ? ', ' : ''}
                                {index + 2 === alternatives.length ? ' or ' : ''}
                                {index === alternatives.length - 1 ? ' ' : ''}
                            </>
                        ))}
                        instead.
                    </Alternatives>
                )}
                {hint.note && (
                    <Note>
                        <strong>Note:</strong> {hint.note}
                    </Note>
                )}
            </LayoutFlex>
        </LayoutFlex>
    );
};
