/**
 * Provides an object of breakpoints for responsive designs.
 *
 * This object contains keys representing breakpoint names (e.g., `xxl`, `xl`)
 * and values representing the pixel widths for those breakpoints. The values are parsed
 * from strings (e.g., "1400px") into numbers for easier usage in responsive logic.
 *
 * Kept in src for internal use
 */

import {
  ArcSizeBreakpointsS,
  ArcSizeBreakpointsXs,
  ArcSizeBreakpointsM,
  ArcSizeBreakpointsL,
  ArcSizeBreakpointsXl,
  ArcSizeBreakpointsXxl,
} from "@arc-ui/tokens-arc";

export type ArcBreakpointSizes = "xs" | "s" | "m" | "l" | "xl" | "xxl";
export type ArcBreakpoint = Record<ArcBreakpointSizes, number>;

export const ArcBreakpoints: ArcBreakpoint = {
  xxl: parseInt(ArcSizeBreakpointsXxl, 10),
  xl: parseInt(ArcSizeBreakpointsXl, 10),
  l: parseInt(ArcSizeBreakpointsL, 10),
  m: parseInt(ArcSizeBreakpointsM, 10),
  s: parseInt(ArcSizeBreakpointsS, 10),
  xs: parseInt(ArcSizeBreakpointsXs, 10),
};

export const ARC_MIN_XS_BREAKPOINT = `(min-width: ${ArcSizeBreakpointsXs})`;
export const ARC_MIN_S_BREAKPOINT = `(min-width: ${ArcSizeBreakpointsS})`;
export const ARC_MIN_M_BREAKPOINT = `(min-width: ${ArcSizeBreakpointsM})`;
export const ARC_MIN_L_BREAKPOINT = `(min-width: ${ArcSizeBreakpointsL})`;
export const ARC_MIN_XL_BREAKPOINT = `(min-width: ${ArcSizeBreakpointsXl})`;
export const ARC_MIN_XXL_BREAKPOINT = `(min-width: ${ArcSizeBreakpointsXxl})`;