import React from 'react';
import { AddGlyph, Button } from '@orchard/frontend-react-components';
import { formatMessage } from '@orchard/frontend-localization';
import cx from 'classnames';

interface selectSongProps {
    setSearchVisibility: React.Dispatch<React.SetStateAction<boolean>>;
}

export const TERM_ADD_SONG = 'comparison.addSong';
const CLASSNAME = 'SelectSong';
const CLASSNAME_BUTTON = `${CLASSNAME}-button`;

const SelectSong = ({ setSearchVisibility }: selectSongProps) => {
    const handleClick = () => setSearchVisibility(true);
    return (
        <div className={cx(CLASSNAME, 'd-print-hide')}>
            <Button className={CLASSNAME_BUTTON} onClick={handleClick} variant="link" block>
                <AddGlyph />
                {formatMessage(TERM_ADD_SONG)}
            </Button>
        </div>
    );
};

export default SelectSong;