import React, { FunctionComponent, useEffect, useState } from 'react';

import Loading from 'components/loading/LoadingComponent';
import { appRouter } from '../router/appRouter';
import { useSearchSuggestions } from 'hooks/searchHook/useSearchSuggestions';
import globalize from 'lib/globalize';
import LinkButton from '../../elements/emby-button/LinkButton';

import '../../elements/emby-button/emby-button';

type SearchSuggestionsProps = {
    parentId?: string | null;
};

const SearchSuggestions: FunctionComponent<SearchSuggestionsProps> = ({ parentId }) => {
    const { isLoading, data: suggestions } = useSearchSuggestions(parentId || undefined);

    if (isLoading) return <Loading />;

    return (
        <div
            className='verticalSection searchSuggestions'
            style={{ textAlign: 'center' }}
        >
            <div>
                <h2 className='sectionTitle padded-left padded-right'>
                    {globalize.translate('Suggestions')}
                </h2>
            </div>

            <div className='searchSuggestionsList padded-left padded-right'>
                {suggestions?.map(item => (
                    <LinkButton key={item.Id}
                        className='button-link'
                        style={{ display: 'inline-block', padding: '0.5em 1em' }}
                        href={appRouter.getRouteUrl(item)}>
                        {item.Name}
                    </LinkButton>
                ))}
            </div>
        </div>
    );
};

export default SearchSuggestions;