import React from "react";
import { Show } from "../../../primitives/responsive/index.js";
import { Detail } from "../../../typography/index.js";
import { useId } from "../../../utils-external/index.js";
import { useDateTranslationContext } from "../../Date.locale.js";
import { DatePickerWeekNumber } from "./DatePicker.WeekNumber.js";
const DatePickerWeekRow = ({ onWeekNumberClick, weeks, }) => {
    const translate = useDateTranslationContext().translate;
    const labelId = useId();
    if (!onWeekNumberClick) {
        return null;
    }
    return (React.createElement(Show, { below: "sm", asChild: true },
        React.createElement("table", { className: "rdp-table", role: "grid" },
            React.createElement("tbody", { className: "rdp-tbody" },
                React.createElement("tr", { className: "rdp-row aksel-date__week-row" },
                    React.createElement(Detail, { as: "th", weight: "semibold", className: "rdp-cell aksel-date__week-cell" },
                        React.createElement("span", { className: "aksel-date__week-wrapper", id: labelId }, translate("week"))), weeks === null || weeks === void 0 ? void 0 :
                    weeks.map((week) => (React.createElement(DatePickerWeekNumber, { key: week.weekNumber, week: week, onWeekNumberClick: onWeekNumberClick, showOnDesktop: false, className: "aksel-date__week-wrapper" }))))))));
};
export { DatePickerWeekRow };
//# sourceMappingURL=DatePicker.WeekRow.js.map