import { ButtonCompound, Card, Flex, Text } from '@servicetitan/anvil2';
import { FC } from 'react';

interface SuggestionProps {
    text: string;
    onClick: (suggestion: string) => void;
}

export const Suggestion: FC<SuggestionProps> = ({ text, onClick }) => {
    return (
        <ButtonCompound onClick={() => onClick(text)}>
            <Card padding="small">
                <Text variant="body" size="small">
                    {text}
                </Text>
            </Card>
        </ButtonCompound>
    );
};

export const SuggestionList: FC<{ suggestions: SuggestionProps[] }> = ({ suggestions }) => {
    if (suggestions?.length === 0) {
        return null;
    }

    return (
        <Flex gap={1} className="p-inline-4 p-block-start-1" style={{ flexWrap: 'wrap' }}>
            {suggestions.map(suggestion => (
                <Suggestion
                    key={suggestion.text}
                    text={suggestion.text}
                    onClick={() => suggestion.onClick(suggestion.text)}
                />
            ))}
        </Flex>
    );
};