import { buildThemedStyles } from "../AtlantisThemeContext";

/**
 * ProgressIndicator
 *
 * Colour tokens mirror the web `ProgressIndicator`: the fill / filled segments
 * use `color-interactive--subtle`; the track / empty segments use
 * `color-surface--active`. The mobile-only pending band / pending segments use
 * `color-informative`, carried forward from today's `ProgressBar` `inProgress`
 * overlay.
 *
 * The bar height is set by the size style; the border radius is derived from
 * that height at render time so the fill and segments stay pill-shaped at every
 * size.
 */
export const useStyles = buildThemedStyles(tokens => ({
  /* Continuous: the root IS the track; the fill / pending sit on top. */
  continuous: {
    width: "100%",
    flexDirection: "row",
    overflow: "hidden",
    backgroundColor: tokens["color-surface--active"],
  },
  fill: {
    height: "100%",
    backgroundColor: tokens["color-interactive--subtle"],
  },
  pending: {
    height: "100%",
    position: "absolute",
    left: 0,
    top: 0,
    backgroundColor: tokens["color-informative"],
  },

  /* Stepped: the root IS the flex row; segments are direct children. */
  stepped: {
    width: "100%",
    flexDirection: "row",
    gap: tokens["space-small"],
  },
  segment: {
    flex: 1,
    height: "100%",
    backgroundColor: tokens["color-surface--active"],
  },
  segmentFilled: {
    backgroundColor: tokens["color-interactive--subtle"],
  },
  segmentPending: {
    backgroundColor: tokens["color-informative"],
  },
}));