import { assignInlineVars } from "@vanilla-extract/dynamic";
import preview from "../../.storybook/preview.tsx";
import { SyncIcon } from "./SyncIcon.tsx";
import { syncTheme } from "./style.css.ts";

const meta = preview.meta({
  title: "Components/SyncIcon",
  component: SyncIcon,
});

export const Inactive = meta.story({
  args: {
    status: "INACTIVE",
  },
});

export const Authenticating = meta.story({
  args: {
    status: "AUTHENTICATING",
  },
});

export const Idle = meta.story({
  args: {
    status: "IDLE",
  },
});

export const Error = meta.story({
  args: {
    status: "ERROR",
  },
});

export const Syncing = meta.story({
  args: {
    status: "SYNCING",
  },
});

export const Waiting = meta.story({
  args: {
    status: "WAITING",
  },
});

export const Overrides = meta.story({
  args: {
    status: "AUTHENTICATING",
  },
  decorators: [
    (Story) => {
      return (
        <div
          style={assignInlineVars(syncTheme, {
            idle: "black",
            inactive: "black",
            syncing: "black",
            error: "black",
          })}
        >
          <Story />
        </div>
      );
    },
  ],
});