"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classNames from "classnames";
import Button from "jt-design-system/es/button";
import Popover from "jt-design-system/es/popover";
import { ColorPalette } from "./icons";
import css from "./editable-map.module.css";
const COLORS = [
    { label: "Nuit", value: "#1f2933" },
    { label: "Doré", value: "#d6bd9d" },
];
export default function ColorPicker({ color, setColor, alignedToRight, }) {
    const classes = classNames(css.colorButton, {
        [css.colorButtonAlignedToRight]: alignedToRight,
    });
    return (_jsxs(Popover, { className: css.colorPopover, contentProps: { side: "bottom", align: "end", alignOffset: -10 }, trigger: _jsx(Button, { type: "button", variant: "secondary", className: classes, compact: true, children: _jsx(ColorPalette, {}) }), children: [_jsx("div", { className: css.colorTitle, children: "Couleur des trac\u00E9s" }), COLORS.map(({ label, value }) => (_jsxs("button", { type: "button", className: css.colorChoice, "data-checked": color === value, onClick: () => setColor(value), children: [_jsx("span", { className: css.colorTag, style: { "--eem-tag-color": value } }), label] }, value)))] }));
}
