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

import { useTokenSearchContext } from '../providers/useTokenSearchContext';

import { TokenCard } from './TokenCard';
import { List, NoResults } from './TokenList.styles';
import { TokenSearchHints } from './TokenSearchHints';

export type Hint = {
    name: string;
    alternatives?: string[];
    note?: string;
};

export const TokenList: FC = () => {
    const { results, terms } = useTokenSearchContext();
    return results.length ? (
        <List>
            {results.map(token => (
                <TokenCard key={token.id} token={token} />
            ))}
        </List>
    ) : (
        <NoResults>
            <LayoutFlex gap="24" column>
                <h3>No tokens found</h3>
                <TokenSearchHints terms={terms} />
            </LayoutFlex>
        </NoResults>
    );
};
