import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Icon } from '../../../../../../ui/components/icon/index.js';
import { cn } from '../../../../../../scalars/lib/index.js';
import { Button } from '../../../../../../scalars/components/fragments/button/index.js';
const CaptionLabel = (props) => {
    const { children, showYearSwitcher, navView, setNavView, dateFormat, ...rest } = props;
    const isHiddenMonthButton = dateFormat !== 'YYYY';
    const navigateTo = ['YYYY-MM', 'MMM-YYYY', 'MMM-YYYY'].includes(dateFormat ?? '');
    if (!showYearSwitcher)
        return _jsx("span", { ...rest, 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: [isHiddenMonthButton && (_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');
                } })), navView !== 'days' && isHiddenMonthButton && (_jsx(Button, { variant: "ghost", onClick: () => {
                    setNavView(navigateTo ? 'years' : 'days');
                }, children: _jsx(Icon, { className: "size-[18px] text-gray-900", name: "CrossCircle" }) }))] }));
};
CaptionLabel.displayName = 'CaptionLabel';
export { CaptionLabel };
//# sourceMappingURL=caption-label.js.map