import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { capitalCase } from "change-case";
import { syncStatuses } from "../../constants/syncing.js";
import { SyncStatusIcon } from "./sync-status-icon.js";
const meta = {
    title: "Connect/Components/SyncStatusIcon",
    component: SyncStatusIcon,
};
export default meta;
export const Default = {
    args: {
        syncStatus: "SYNCING",
    },
    render: function Wrapper() {
        return (_jsx("div", { className: "flex flex-col flex-wrap gap-4", children: syncStatuses.map((status) => (_jsxs("p", { className: "flex items-center gap-2", children: [capitalCase(status), " ", _jsx(SyncStatusIcon, { syncStatus: status })] }, status))) }));
    },
};
export const WithDifferentSizes = {
    args: {
        syncStatus: "SYNCING",
    },
    render: function Wrapper() {
        return (_jsx("div", { className: "flex flex-col flex-wrap gap-4", children: syncStatuses.map((status, index) => (_jsxs("p", { className: "flex items-center gap-2", children: [capitalCase(status), " ", _jsx(SyncStatusIcon, { size: (index + 1) * 24, syncStatus: status })] }, status))) }));
    },
};
export const WithDifferentColors = {
    args: {
        syncStatus: "SYNCING",
    },
    render: function Wrapper() {
        return (_jsx("div", { className: "flex flex-col flex-wrap gap-4", children: syncStatuses.map((status) => (_jsxs("p", { className: "flex items-center gap-2", children: [capitalCase(status), " ", _jsx(SyncStatusIcon, { className: "text-gray-900", syncStatus: status })] }, status))) }));
    },
};
//# sourceMappingURL=sync-status-icon.stories.js.map