import { Color } from "@/lib/Enums";
import styles from "@/styles/DrawBoard/ColorSelector.module.css";
import DoneRoundedIcon from '@mui/icons-material/DoneRounded';

type ColorSelectorProps = {
    isActive: boolean;
    color: Color;
    onClick: () => void;
    title?: string;
};

function ColorSelector({ isActive, color, onClick, title }: ColorSelectorProps) {
    return (
        <button
            type="button"
            onClick={onClick}
            title={title ?? color}
            aria-pressed={isActive}
            className={styles.button + (isActive ? " " + styles.active : "")}
            style={{ backgroundColor: color }}
        >
            {isActive && <DoneRoundedIcon style={{ color: "white", filter: "brightness(125%)" }} />}
        </button>
    );
}

export default ColorSelector;