import { ReactNode, useContext } from 'react';

import { Bin, binToLabel } from '../../../../lib/bin.enum';
import { BinnerContext } from '../../context/BinnerContext';

interface BinButtonProps {
    bin: Bin;
    className?: string;
    icon?: ReactNode;
}

export function BinButton({ bin, className, icon }: BinButtonProps) {
    const { item, setBin } = useContext(BinnerContext);
   
    return (
        <div className={className}>
            <button disabled={!item} onClick={() => setBin(bin)}>
                {icon && <span>{icon}</span>}
                <strong>{binToLabel(bin)}</strong>
            </button>
        </div>
    );
}
