export function Chip(props: {text: string, selected: boolean, select: () => void}) {
    const selectedClasses = () => {
        if (props.selected) {
            return "bg-c-surface-variant text-c-on-surface-variant shadow";
        } else {
            return "";
        }
    };

    return (
        <div
            class={`inline-block px-3 py-1 border border-c-outline rounded-md text-sm cursor-pointer
                    hover:bg-c-surface-variant hover:text-c-on-surface-variant transition-colors
                    select-none ${selectedClasses()}`}
            onClick={props.select}
        >
            {props.text}
        </div>
    );
}
