import React, { useMemo } from "react";
import { CaretDownIcon } from "@phosphor-icons/react";
import { useRootElement } from "../context";
import * as styles from "./styles";
import { ScoreIconDeprecated } from "~/components/ScoreIconDeprecated";
/**
 * @deprecated
 */
export const Card = ({ title, scoreKey, value, description, onClick, }) => {
    const { activeScore, setActiveScore } = useRootElement();
    const formattedScoreValue = useMemo(() => (Math.round(Number(value) * 10) / 10) * 2, [value]);
    const handleOnHeaderClick = (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 === title, "data-cy": "score-card", "data-score": scoreKey },
        React.createElement("div", { className: styles.header, "data-expandable": !!description, onClick: handleOnHeaderClick(title) },
            !!description && (React.createElement(CaretDownIcon, { className: styles.expandToggleIcon, "data-is-active": title === activeScore })),
            React.createElement("div", { className: styles.titleContainer },
                React.createElement(ScoreIconDeprecated, { score: scoreKey, className: styles.scoreIcon }),
                React.createElement("p", { className: styles.scoreTitle }, title)),
            React.createElement("div", { className: styles.scoreValue }, formattedScoreValue)),
        title === activeScore && (React.createElement("div", { className: styles.description }, description))));
};
//# sourceMappingURL=index.js.map