import React from 'react';
import { DataHooks } from './constants';
import { classes } from './ColorPickerHistory.st.css.js';
const ColorPickerHistory = ({ show, current, previous, onClick }) => {
    const handleKeyDown = e => {
        if (e.key === 'Enter' || e.key === ' ') {
            e.preventDefault();
            onClick(previous);
        }
    };
    if (show) {
        return (React.createElement("div", { className: classes.root, "data-hook": DataHooks.history },
            React.createElement("div", { "data-hook": DataHooks.historyPrevious, style: { background: previous.hex() }, onClick: () => onClick(previous), onKeyDown: handleKeyDown, tabIndex: 0, role: "button", "aria-label": `Previous color: ${previous.hex()}` }),
            React.createElement("div", { "data-hook": DataHooks.historyCurrent, style: { background: current.hex() }, role: "img", "aria-label": `Current color: ${current.hex()}` })));
    }
    return null;
};
export default ColorPickerHistory;
//# sourceMappingURL=ColorPickerHistory.js.map