;(function () {
/* RangeTabs — segmented time range selector (1D, 1W, 1M, 3M, 1Y, All). */

const RANGES = ['1D', '1W', '1M', '3M', '1Y', 'All'];

const RangeTabs = ({ value, onChange }) => {
  return (
    <div style={styles.row}>
      {RANGES.map(item => {
        const active = value === item;
        return (
          <button
            key={item}
            onClick={() => onChange && onChange(item)}
            style={{
              border: 'none',
              background: 'transparent',
              padding: 0,
              margin: 0,
              cursor: 'pointer',
              font: 'inherit',
              color: 'inherit',
              textAlign: 'inherit',
              ...styles.tab,
              backgroundColor: active ? colors.ink : colors.bg,
            }}
          >
            <span style={{ ...styles.label, color: active ? '#fff' : colors.muted }}>
              {item}
            </span>
          </button>
        );
      })}
    </div>
  );
};

const styles = {
  row: {
    display: 'flex',
    flexDirection: 'row',
    gap: '6px',
  },
  tab: {
    flex: 1,
    height: '30px',
    borderRadius: '32px',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  label: {
    fontFamily: 'Gilroy',
    fontWeight: 600,
    fontSize: '12px',
  },
};

Object.assign(window, { RangeTabs });
})();