import React from "react";
import { useRootElement } from "../context";
import { Container } from "./Container";
import { ToggleIcon } from "./ToggleIcon";
import { Title } from "./Title";
import { Value } from "./Value";
import { Description } from "./Description";
import * as styles from "./styles";
export const Card = ({ title, scoreKey, value, description, onClick, }) => {
    const { activeScore, setActiveScore } = useRootElement();
    const handleContainerClick = (newScore) => {
        if (!description) {
            return;
        }
        setActiveScore(activeScore !== newScore ? newScore : "");
        if (typeof onClick !== "undefined") {
            // If the values are not the same, it becomes active
            onClick(newScore, activeScore !== newScore);
        }
    };
    return (React.createElement("div", { className: styles.container, "data-active": activeScore === scoreKey, "data-testid": "score-card", "data-score": scoreKey },
        React.createElement(Container, { scoreKey: scoreKey, onClick: description ? handleContainerClick : undefined },
            React.createElement(ToggleIcon, { isExpandable: !!description }),
            React.createElement(Title, { scoreKey: scoreKey }, title),
            React.createElement(Value, { scoreValue: value })),
        React.createElement(Description, { isVisible: scoreKey === activeScore }, description)));
};
//# sourceMappingURL=index.js.map