/**
 * @file bootstrapBreakpoints.ts - Defines Bootstrap 5 responsive breakpoint values in pixels.
 */

/**
 * Values matching Bootstrap's default breakpoints, useful for:
 * - Conditional rendering based on screen size
 * - Media query matching with react-responsive
 * - Programmatic layout adjustments
 *
 * @example
 * ```tsx
 * import { useMediaQuery } from 'react-responsive';
 * import { breakpoints } from './bootstrapBreakpoints';
 *
 * const isMobileMd = useMediaQuery({ maxWidth: breakpoints.md - 1 });
 * ```
 *
 * @see https://getbootstrap.com/docs/5.3/layout/breakpoints/
 */
export const breakpoints = {
  /** Extra small devices (portrait phones) - < 576px */
  xs: 0,
  /** Small devices (landscape phones) - >= 576px */
  sm: 576,
  /** Medium devices (tablets) - >= 768px */
  md: 768,
  /** Large devices (desktops) - >= 992px */
  lg: 992,
  /** Extra large devices (large desktops) - >= 1200px */
  xl: 1200,
  /** Extra extra large devices (larger desktops) - >= 1400px */
  xxl: 1400,
};
