import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { mergeClassNameProps, PowerhouseButton, } from "@powerhousedao/design-system";
import { useState } from "react";
export const CookieBanner = (props) => {
    const { children, cookies, submitLabel, rejectLabel, onSubmit = () => { }, onReject = () => { }, ...divProps } = props;
    const [cookiesValue, setCookiesValue] = useState(cookies);
    const handleOnChange = (event) => {
        const { id, checked } = event.target;
        setCookiesValue((prevState) => prevState.map((cookie) => cookie.id === id ? { ...cookie, value: checked } : cookie));
    };
    const buttonStyles = "min-w-64 h-8 text-base";
    return (_jsxs("div", { ...mergeClassNameProps(divProps, "flex flex-col items-center"), children: [_jsx("div", { className: "text-center", children: children }), _jsx("div", { className: "my-8 flex gap-x-16 text-sm font-medium", children: cookiesValue.map((cookie, i) => (_jsxs("div", { className: "cursor-pointer", children: [_jsx("input", { checked: cookie.value, className: "mr-1 size-3 cursor-pointer rounded-sm border-2 border-gray-900 accent-gray-900 focus:outline-none", id: cookie.id, onChange: handleOnChange, type: "checkbox" }), _jsx("label", { className: "cursor-pointer select-none", htmlFor: cookie.id, children: cookie.label })] }, i))) }), _jsxs("div", { className: "flex gap-x-8", children: [_jsx(PowerhouseButton, { className: buttonStyles, color: "light", onClick: () => onReject(), size: "small", children: rejectLabel }, "button-reject"), _jsx(PowerhouseButton, { className: buttonStyles, onClick: () => onSubmit(cookiesValue), size: "small", children: submitLabel }, "button-submit")] })] }));
};
//# sourceMappingURL=cookie-banner.js.map