import { Color } from '@/lib/Enums';
import ColorSelector from './ColorSelector';
import styles from '@/styles/DrawBoard/ColorToolbar.module.css';

function ColorToolbar({ color, setColor }: { color: Color; setColor: (color: Color) => void }) {
    return (
        <div className={styles.container}>
            <ColorSelector isActive={color === Color.Black} color={Color.Black} onClick={() => setColor(Color.Black)} />
            <ColorSelector isActive={color === Color.Blue} color={Color.Blue} onClick={() => setColor(Color.Blue)} />
            <ColorSelector isActive={color === Color.Red} color={Color.Red} onClick={() => setColor(Color.Red)} />
            <ColorSelector isActive={color === Color.Green} color={Color.Green} onClick={() => setColor(Color.Green)} />
            <ColorSelector isActive={color === Color.Yellow} color={Color.Yellow} onClick={() => setColor(Color.Yellow)} />
            <ColorSelector isActive={color === Color.Purple} color={Color.Purple} onClick={() => setColor(Color.Purple)} />
            <ColorSelector isActive={color === Color.Orange} color={Color.Orange} onClick={() => setColor(Color.Orange)} />
        </div>
    );
}
export default ColorToolbar;