import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from "@powerhousedao/design-system";
import { cn } from "#scalars";
import { Button } from "../../../../../../scalars/components/fragments/button/index.js";
const CaptionLabel = ({ children, showYearSwitcher, navView, setNavView, ...props }) => {
    if (!showYearSwitcher)
        return _jsx("span", { ...props, children: children });
    // Convert children to a string and split by space to separate the month and the year
    const [monthAbbreviation, yearNumber] = children.split(" ");
    const isSelectedMonth = navView === "months";
    const isSelectedYear = navView === "years";
    return (_jsxs("div", { className: cn("flex items-center gap-2 text-gray-600", isSelectedMonth ? "text-gray-900" : "text-gray-600"), children: [_jsxs(Button, { className: cn("truncate text-sm font-semibold", isSelectedYear ? "text-gray-900" : "text-gray-600"), variant: "ghost", onClick: () => setNavView("years"), children: [_jsx("span", { className: cn(isSelectedMonth ? "text-gray-900" : "text-gray-600"), children: monthAbbreviation }), _jsx("span", { className: cn(isSelectedYear ? "text-gray-900" : "text-gray-600"), children: yearNumber })] }), navView === "days" ? (_jsx(Icon, { className: "size-[18px] cursor-pointer text-gray-600", name: "TriangleDown", onClick: () => setNavView("years") })) : (_jsx(Button, { variant: "ghost", onClick: () => setNavView("days"), children: _jsx(Icon, { className: "size-[18px] text-gray-900", name: "CrossCircle" }) }))] }));
};
export default CaptionLabel;
//# sourceMappingURL=caption-label.js.map